API reference

Here's the full contract for nav: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial nav in with 4 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`items`Required	`HubNavItem[]`	—	Array of navigation items to render. Each item defines its type (link, dropdown, header, separator, custom), label, route, icon, badge, children, and more.
`config`	`Partial<HubNavConfig>`	`{}`	Partial configuration overrides merged with global defaults. Controls orientation, dropdown trigger, collapse mode, breakpoint, position, and more.
`navClass`	`string`	`''`	Additional CSS class applied to the nav container element.
`itemTemplate`	`TemplateRef<HubNavItemTemplateContext> \| null`	`null`	Optional custom template for rendering nav items via input binding. The hubNavItemTemplate directive takes priority over this input.

Outputs

React to what nav does — 5 events to hook your logic onto.

Name	Type	Description
`itemClick`	`OutputEmitterRef<HubNavItem>`	Emitted when a link item is clicked. Provides the clicked HubNavItem.
`dropdownOpen`	`OutputEmitterRef<HubNavItem>`	Emitted when a dropdown item is opened.
`dropdownClose`	`OutputEmitterRef<HubNavItem>`	Emitted when a dropdown item is closed.
`mobileToggle`	`OutputEmitterRef<boolean>`	Emitted when the mobile panel is toggled. Provides true when open, false when closed.
`panelChange`	`OutputEmitterRef<HubNavPanelEvent>`	Emitted when a panel is opened, closed, drilled-down, or navigated back. Provides the item, panel index, and action type.

Templates

Make it yours — 3 template slots let you project custom markup.

Name	Description	Example
`hubNavStart`	Projects custom content in the start slot. Horizontal: visual start (left in LTR, right in RTL). Vertical: top of the primary column.	`<hub-nav [items]="items"> <ng-template hubNavStart let-collapsed="collapsed"> <img src="logo.svg" alt="Brand" /> @if (!collapsed) { <span>App Name</span> } </ng-template> </hub-nav>`
`hubNavEnd`	Projects custom content in the end slot. Horizontal: visual end (right in LTR, left in RTL). Vertical: bottom of the primary column.	`<hub-nav [items]="items"> <ng-template hubNavEnd> <button type="button">Sign out</button> </ng-template> </hub-nav>`
`hubNavItemTemplate`	Overrides the default item rendering with a custom template. Receives HubNavItemTemplateContext with $implicit (item), active, expanded, and depth properties.	`<hub-nav [items]="items"> <ng-template hubNavItemTemplate let-item let-active="active"> <span [class.fw-bold]="active">{{ item.label }}</span> @if (item.badge) { <span class="badge">{{ item.badge }}</span> } </ng-template> </hub-nav>`