angular-router-menus

Angular Router Menus

Simplify your Angular applications navigation by defining menu entries directly at the route itself. It is fully typed and defined by your requirements, build as many navigation's as you like. It also supports nesting menus so you can build yourself cool dropdowns. All menus are build and injected into several injection tokens, so you can import them anywhere.

pnpm add angular-router-menus

[!TIP] Zero dependencies and no performance bottleneck!

• Installation
• Usage
• Configuration
  • MenuOptions
• Examples

Installation

• Install the package
• Create a type definition file or add to yours
  • declare type Menus = "main" | "aside"
  • Adjust menus by your needs, you will configure them later
• In your main.ts file import and configure the library
• Make sure you have all your declared menus in the menus array
• You must need a preloading strategy because I use internal api's
  • NoPreloading is the default in Angular

void bootstrapApplication(AppComponent, {
	providers: [
		provideRouter(routes, withPreloading(NoPreloading)),
		provideRouterMenus(routes, ["main"], {
			defaultMenu: "main", // 👋🏻
			debug: !environment.production,
		}),
	],
}).catch((error) => {
	console.error(error);
});

Usage

@Component({
	selector: "app-root",
	templateUrl: "./app.component.html",
	styleUrl: "./app.component.scss",
	changeDetection: ChangeDetectionStrategy.OnPush,
	imports: [RouterOutlet, RouterLink, RouterLinkActive],
})
export class AppComponent {
	readonly menu = inject(RouterMenusService).use("main"); // 👋🏻
}

<ul>
	@for (item of menu(); track item.href) {
	<li>
		<a [routerLink]="item.href" routerLinkActive="active">{{ item.label }}</a>
	</li>
	}
</ul>

Configuration

For details on menu items configuration, please take a look at the interfaces and its documentation here: projects/angular-router-menus/src/lib/menu.ts

Property	Description
defaultMenu	If not defined via in this is the default menu.
debug	Enables debugging, because of internal API use I omit all errors.
menuOptions	Object of menu name and an object. Please see MenuOptions.

MenuOptions

Property	Description
sortOrder	Sort menu by "asc" or "desc".

Examples

For an example go to projects/app and run it :)