Angular Navigation Menu Component | ng-hub-ui-nav
Angular navigation component with dropdowns, drill-down panels, responsive collapse, router integration and CSS-variable theming.
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 |
|---|---|---|---|
itemsRequired | 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> |
CSS variables
Theme every pixel with 42 CSS variables. Override them at :root or scope them to a wrapper.
Layout
Control the overall nav dimensions, padding, and spacing.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-nav-height | 3.5rem | length | Height of the navigation bar. 3rem4remauto |
--hub-nav-padding-x | 1rem | length | Horizontal padding of the nav container. 0.5rem1.5rem2rem |
--hub-nav-padding-y | 0.5rem | length | Vertical padding of the nav container. 0.25rem0.75rem1rem |
--hub-nav-gap | 0.25rem | length | Gap between nav items. 00.5rem1rem |
Colors & Background
Control the nav color scheme and borders.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-nav-bg | #fff | color | Background color of the navigation bar. #f8f9fatransparentvar(--hub-sys-surface-page) |
--hub-nav-color | #212529 | color | Base text color of the navigation. #333#fffvar(--hub-sys-text-primary) |
--hub-nav-border-color | #dee2e6 | color | Border color of the navigation bar. transparent#cccvar(--hub-sys-border-color-default) |
Items
Styling for individual navigation items across all states.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-nav-item-padding-x | 1rem | length | Horizontal padding inside nav items. 0.5rem1.25rem1.5rem |
--hub-nav-item-padding-y | 0.5rem | length | Vertical padding inside nav items. 0.25rem0.75rem1rem |
--hub-nav-item-color | #212529 | color | Text color of nav items. #495057#fffinherit |
--hub-nav-item-border-radius | 0.25rem | length | Border radius of nav items. 00.375rem50rem |
--hub-nav-item-hover-bg | rgba(0, 0, 0, 0.04) | color | Background color on hover. #e9ecefrgba(255, 255, 255, 0.1)transparent |
--hub-nav-item-hover-color | #0d6efd | color | Text color on hover. #0a58ca#fffvar(--hub-sys-color-primary) |
--hub-nav-item-active-bg | #0d6efd | color | Background color when item is active. #0a58catransparentvar(--hub-sys-color-primary) |
--hub-nav-item-active-color | #fff | color | Text color when item is active. #0d6efd#212529var(--hub-sys-text-inverse) |
--hub-nav-item-disabled-color | #6c757d | color | Text color for disabled items. #adb5bdvar(--hub-sys-text-muted) |
--hub-nav-item-disabled-opacity | 0.65 | number | Opacity for disabled items. 0.50.41 |
Dropdown
Customize dropdown panel appearance and positioning.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-nav-dropdown-bg | #fff | color | Background color of dropdown panels. #f8f9fa#343a40var(--hub-sys-surface-elevated) |
--hub-nav-dropdown-border-color | #dee2e6 | color | Border color of dropdown panels. transparent#ccc |
--hub-nav-dropdown-border-radius | 0.375rem | length | Border radius of dropdown panels. 00.25rem0.5rem |
--hub-nav-dropdown-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | shadow | Box shadow of dropdown panels. none0 4px 8px rgba(0,0,0,0.1)0 1rem 3rem rgba(0,0,0,0.175) |
--hub-nav-dropdown-min-width | 12rem | length | Minimum width of dropdown panels. 10rem15rem200px |
Brand
Styling for the brand slot area.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-nav-brand-font-size | 1.25rem | length | Font size of the brand text. 1rem1.5rem2rem |
--hub-nav-brand-font-weight | 600 | number | Font weight of the brand text. 400700800 |
--hub-nav-brand-color | #212529 | color | Text color of the brand. #fff#0d6efdinherit |
Mobile Panel
Configuration for the responsive mobile navigation panel.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-nav-mobile-bg | #fff | color | Background color of the mobile panel. #f8f9fa#212529var(--hub-sys-surface-page) |
--hub-nav-mobile-width | 18rem | length | Width of the offcanvas mobile panel. 15rem20rem80vw |
--hub-nav-mobile-backdrop-bg | rgba(0, 0, 0, 0.5) | color | Backdrop color behind the mobile panel. rgba(0, 0, 0, 0.3)rgba(0, 0, 0, 0.75)transparent |
--hub-nav-mobile-transition | 300ms ease | transition | Transition timing for mobile panel open/close animation. 200ms ease-in-out400ms ease150ms linear |
Accordion & Icons
Vertical accordion indent and icon sizing.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-nav-accordion-indent | 1rem | length | Left indentation per nesting level in vertical accordion mode. 0.5rem1.5rem2rem |
--hub-nav-icon-size | 1.25rem | length | Size of navigation item icons. 1rem1.5rem2rem |
--hub-nav-icon-gap | 0.5rem | length | Gap between icon and label text. 0.25rem0.75rem1rem |
Panel
Styling for the stacked panel drill-down navigation.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-nav-panel-width | 16rem | length | Default width of each panel. 14rem18rem20rem |
--hub-nav-panel-zindex | 100 | number | Stacking order of panels (should be lower than dropdown z-index). 50100200 |
--hub-nav-panel-bg | var(--hub-sys-surface-page, #fff) | color | Background color of panels. #f8f9fa#fffvar(--hub-sys-surface-elevated) |
--hub-nav-panel-color | var(--hub-sys-text-primary, #212529) | color | Text color inside panels. #333#fffinherit |
--hub-nav-panel-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Border color between panels. transparent#ccc |
--hub-nav-panel-shadow | inset 4px 0 8px -4px rgba(0, 0, 0, 0.1) | shadow | Box shadow of panels. none2px 0 4px rgba(0,0,0,0.05) |
--hub-nav-panel-header-height | 3rem | length | Height of the panel header. 2.5rem3.5rem4rem |
--hub-nav-panel-header-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Background color of the panel header. #fff#e9eceftransparent |
--hub-nav-panel-back-color | var(--hub-sys-text-secondary, #6c757d) | color | Color of the back button in the panel header. #212529#0d6efdinherit |
--hub-nav-panel-back-hover-bg | rgba(0, 0, 0, 0.04) | color | Hover background of panel header buttons. #e9ecefrgba(0,0,0,0.08) |
Styling and theming
No styling examples are documented yet. This section will include customization recipes and theming examples.