Routed menubar
The menubar takes no @angular/router dependency — no package in the suite does. Bind activeKey one-way from the URL (the matching item renders aria-current="page") and navigate in itemClick. url items stay real links, so middle-click and copy-address keep working; preventDefault hands the primary click to the router.
activeKey aria-current no router dependency
Router-driven menubar
The bar never owns the active state here — it reflects the route and asks the router to change it. Matching is by key, so routes can be reordered without touching the binding.
URL is the source of truth Back/Forward works
Members — deep-linkable: this URL can be bookmarked and shared.
import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
import { OgeMenubar } from '@oge-ui/navigation';
import { RouterOutlet, NavigationEnd, Router } from '@angular/router';
import type { OgeMenubarItemData, OgeMenubarItemClickEvent } from '@oge-ui/navigation';
@Component({
selector: 'demo-root',
imports: [OgeMenubar, RouterOutlet],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- The menubar takes no router dependency: bind activeKey
one-way from the URL (it renders aria-current="page") and navigate in
itemClick. url items stay real links for middle-click and copy-address;
preventDefault hands the click to the router instead. -->
<oge-menubar
[items]="menu"
[activeKey]="activeKey()"
(itemClick)="go($event)"
/>
<router-outlet />
`,
})
export class Demo {
private readonly router = inject(Router);
protected readonly menu: OgeMenubarItemData[] = [
{ text: 'Overview', key: 'overview', url: '/app/overview' },
{ text: 'Members', key: 'members', url: '/app/members' },
{
text: 'Reports',
items: [
{ text: 'Monthly', key: 'monthly' },
{ text: 'Annual', key: 'annual' },
],
},
];
private readonly url = signal(this.router.url);
protected readonly activeKey = computed(
() => this.url().split('/').pop() ?? 'overview',
);
constructor() {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) this.url.set(event.urlAfterRedirects);
});
}
protected go(event: OgeMenubarItemClickEvent): void {
event.event.preventDefault();
if (event.key) void this.router.navigate(['/app', event.key]);
}
}