Angular Navigation Menu Component | ng-hub-ui-nav
Angular navigation component with dropdowns, drill-down panels, responsive collapse, router integration and CSS-variable theming.
Styles
Mixins and styles
Override the most useful `--hub-nav-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep their defaults. For any token not exposed here, set the `--hub-nav-*` custom property directly — this mixin is sugar for the common knobs, not a replacement for the full token surface.
Theming with hub-nav-theme
| Mixin | Parameters | Description |
|---|---|---|
| Theming | ||
hub-nav-theme() | $accent--hub-nav-accent$bg--hub-nav-bg$color--hub-nav-color$border-color--hub-nav-border-color$gap--hub-nav-gap$padding-x--hub-nav-padding-x$padding-y--hub-nav-padding-y$item-color--hub-nav-item-color$item-active-bg--hub-nav-item-active-bg$item-active-color--hub-nav-item-active-color$item-border-radius--hub-nav-item-border-radius$item-font-size--hub-nav-item-font-size$item-padding-x--hub-nav-item-padding-x$item-padding-y--hub-nav-item-padding-y | One-call token theming for `<hub-nav>` |
CSS variables
Theme every pixel with 120 CSS variables. Override them at :root or scope them to a wrapper.
Nav
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-nav-accordion-indent | var(--hub-ref-space-3, 1rem) | length | Left indentation per nesting level in vertical accordion mode. |
--hub-nav-accordion-transition | 0.35s ease | transition | Accordion expand/collapse transition |
--hub-nav-badge-bg | var(--hub-sys-color-danger, #dc3545) | color | Badge background color |
--hub-nav-badge-border-radius | var(--hub-ref-radius-pill, 50rem) | length | Badge corner radius |
--hub-nav-badge-color | var(--hub-ref-color-white, #fff) | color | Badge text color |
--hub-nav-badge-font-size | var(--hub-ref-font-size-xs, 0.75rem) | length | Badge font size |
--hub-nav-badge-padding-x | 0.5em | length | Badge horizontal padding |
--hub-nav-badge-padding-y | 0.25em | length | Badge vertical padding |
--hub-nav-accent | var(--hub-sys-color-primary, #0d6efd) | color | Semantic accent — re-based per variant; drives the hover/active affordances |
--hub-nav-accent-subtle | color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff)) | color | Subtle accent tint — soft active/hover surface |
--hub-nav-bg | color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff)) | color | Background color of the navigation bar. |
--hub-nav-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Border color of the navigation bar. |
--hub-nav-border-style | solid | border | Navigation border style |
--hub-nav-border-width | 1px | length | Navigation border width |
--hub-nav-border-radius | 0 | length | Corner radius of the nav bar surface |
--hub-nav-box-shadow | none | shadow | Box shadow of the nav bar surface |
--hub-nav-brand-color | var(--hub-sys-text-primary, #212529) | color | Text color of the brand. |
--hub-nav-brand-font-size | var(--hub-ref-font-size-lg, 1.25rem) | length | Font size of the brand text. |
--hub-nav-brand-font-weight | var(--hub-ref-font-weight-semibold, 600) | number | Font weight of the brand text. |
--hub-nav-brand-padding-x | var(--hub-ref-space-2, 0.5rem) | length | Brand horizontal padding |
--hub-nav-caret-color | currentColor | color | Dropdown caret color |
--hub-nav-caret-size | 0.3rem | length | Dropdown caret size |
--hub-nav-color | var(--hub-sys-text-primary, #212529) | color | Base text color of the navigation. |
--hub-nav-dropdown-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Background color of dropdown panels. |
--hub-nav-dropdown-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Border color of dropdown panels. |
--hub-nav-dropdown-border-radius | var(--hub-nav-item-border-radius, var(--hub-ref-radius-sm, 0.25rem)) | length | Border radius of dropdown panels. |
--hub-nav-dropdown-color | var(--hub-sys-text-primary, #212529) | color | Dropdown menu text color |
--hub-nav-dropdown-min-width | 12rem | length | Minimum width of dropdown panels. |
--hub-nav-dropdown-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Dropdown menu vertical padding |
--hub-nav-dropdown-shadow | var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15)) | shadow | Box shadow of dropdown panels. |
--hub-nav-dropdown-zindex | var(--hub-sys-zindex-dropdown, 1000) | number | Dropdown menu z-index |
--hub-nav-gap | var(--hub-ref-space-1, 0.25rem) | length | Gap between nav items. |
--hub-nav-header-color | var(--hub-sys-text-muted, #6c757d) | color | Section header text color |
--hub-nav-header-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Section header font size |
--hub-nav-header-font-weight | var(--hub-ref-font-weight-semibold, 600) | number | Section header font weight |
--hub-nav-header-horizontal-padding-inline-start | 2rem | length | Horizontal header inline-start padding |
--hub-nav-header-margin-inline-start | var(--hub-ref-space-3, 1rem) | length | Section header inline-start margin |
--hub-nav-header-margin-top | var(--hub-ref-space-3, 1rem) | length | Section header top margin |
--hub-nav-header-padding-x | var(--hub-ref-space-3, 1rem) | length | Section header horizontal padding |
--hub-nav-header-padding-y | var(--hub-ref-space-1, 0.25rem) | length | Section header vertical padding |
--hub-nav-height | 3.5rem | length | Height of the navigation bar. |
--hub-nav-horizontal-items-justify | center | string | Horizontal items justification |
--hub-nav-collapsed-justify | space-between | string | justify-content of items when the nav is collapsed (opt-in hook) |
--hub-nav-horizontal-items-overflow-x | auto | string | Horizontal items x-overflow |
--hub-nav-horizontal-items-overflow-y | hidden | string | Horizontal items y-overflow |
--hub-nav-horizontal-padding-x | 0 | length | Horizontal nav horizontal padding |
--hub-nav-horizontal-padding-y | 0 | length | Horizontal nav vertical padding |
--hub-nav-horizontal-panel-padding-x | 0 | length | Horizontal panel horizontal padding |
--hub-nav-horizontal-panel-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Horizontal panel vertical padding |
--hub-nav-horizontal-row-gap | 0 | length | Horizontal nav row gap |
--hub-nav-icon-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap between icon and label text. |
--hub-nav-icon-size | var(--hub-ref-icon-size, 1em) | length | Size of navigation item icons. |
--hub-nav-item-active-bg | var(--hub-nav-accent-subtle) | color | Background color when item is active. |
--hub-nav-item-active-color | var(--hub-nav-accent) | color | Text color when item is active. |
--hub-nav-item-active-indicator-color | var(--hub-nav-accent) | color | Active item indicator bar color |
--hub-nav-item-active-indicator-size | 3px | length | Active item indicator bar thickness |
--hub-nav-item-active-font-weight | var(--hub-ref-font-weight-semibold, 600) | number | Active item font weight |
--hub-nav-item-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Border radius of nav items. |
--hub-nav-item-color | var(--hub-sys-text-primary, #212529) | color | Text color of nav items. |
--hub-nav-item-disabled-color | var(--hub-sys-text-muted, #6c757d) | color | Text color for disabled items. |
--hub-nav-item-disabled-opacity | var(--hub-sys-opacity-disabled, 0.65) | number | Opacity for disabled items. |
--hub-nav-item-font-size | var(--hub-ref-font-size-base, 1rem) | length | Nav item font size |
--hub-nav-item-font-weight | var(--hub-ref-font-weight-base, 400) | number | Nav item font weight |
--hub-nav-item-hover-bg | color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff)) | color | Background color on hover. |
--hub-nav-item-hover-color | var(--hub-nav-accent) | color | Text color on hover. |
--hub-nav-item-padding-x | var(--hub-nav-mobile-item-padding-inline, 0.75rem) | length | Horizontal padding inside nav items. |
--hub-nav-item-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Vertical padding inside nav items. |
--hub-nav-item-transition | var(--hub-sys-transition-fast, all 0.15s ease-in-out) | transition | Nav item state transition |
--hub-nav-mobile-backdrop-bg | rgba(0, 0, 0, 0.5) | color | Backdrop color behind the mobile panel. |
--hub-nav-mobile-bg | var(--hub-sys-surface-page, #fff) | color | Background color of the mobile panel. |
--hub-nav-mobile-color | var(--hub-sys-text-primary, #212529) | color | Mobile panel text color |
--hub-nav-mobile-transition | var(--hub-sys-transition-base, all 0.2s ease-in-out) | transition | Transition timing for mobile panel open/close animation. |
--hub-nav-mobile-width | 18rem | length | Width of the offcanvas mobile panel. |
--hub-nav-mobile-zindex | var(--hub-sys-zindex-fixed, 1030) | number | Mobile panel z-index |
--hub-nav-padding-x | var(--hub-ref-space-3, 1rem) | length | Horizontal padding of the nav container. |
--hub-nav-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Vertical padding of the nav container. |
--hub-nav-panel-back-color | var(--hub-sys-text-primary, #212529) | color | Color of the back button in the panel header. |
--hub-nav-panel-back-hover-bg | var(--hub-sys-state-hover-bg, rgba(0, 0, 0, 0.075)) | color | Hover background of panel header buttons. |
--hub-nav-panel-back-size | 2rem | length | Panel back button size |
--hub-nav-panel-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Background color of panels. |
--hub-nav-panel-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Border color between panels. |
--hub-nav-panel-border-width | 1px | length | Side panel border width |
--hub-nav-panel-color | var(--hub-sys-text-primary, #212529) | color | Text color inside panels. |
--hub-nav-panel-header-bg | var(--hub-sys-surface-page, #fff) | color | Background color of the panel header. |
--hub-nav-panel-header-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Panel header border color |
--hub-nav-panel-header-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Panel header font size |
--hub-nav-panel-header-font-weight | var(--hub-ref-font-weight-semibold, 600) | number | Panel header font weight |
--hub-nav-panel-header-height | 3rem | length | Height of the panel header. |
--hub-nav-panel-header-padding-x | var(--hub-ref-space-3, 1rem) | length | Panel header horizontal padding |
--hub-nav-panel-shadow | var(--hub-sys-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)) | shadow | Box shadow of panels. |
--hub-nav-panel-transition | var(--hub-sys-transition-base, all 0.2s ease-in-out) | transition | Side panel slide transition |
--hub-nav-panel-width | 16rem | length | Default width of each panel. |
--hub-nav-panel-zindex | var(--hub-sys-zindex-dropdown, 1000) | number | Stacking order of panels (should be lower than dropdown z-index). |
--hub-nav-scrollbar-color | transparent transparent | color | Scrollbar thumb/track color |
--hub-nav-scrollbar-thumb-color | transparent | color | Scrollbar thumb color |
--hub-nav-scrollbar-thumb-radius | var(--hub-ref-radius-pill, 50rem) | length | Scrollbar thumb corner radius |
--hub-nav-scrollbar-track-color | transparent | color | Scrollbar track color |
--hub-nav-scrollbar-webkit-size | 0 | length | WebKit scrollbar size |
--hub-nav-scrollbar-width | none | length | Scrollbar width visibility |
--hub-nav-separator-color | var(--hub-sys-border-color-default, #dee2e6) | color | Separator divider color |
--hub-nav-separator-margin-y | var(--hub-ref-space-2, 0.5rem) | length | Separator vertical margin |
--hub-nav-toggler-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Toggler button border color |
--hub-nav-toggler-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Toggler button corner radius |
--hub-nav-toggler-color | var(--hub-sys-text-primary, #212529) | color | Toggler button icon color |
--hub-nav-toggler-font-size | var(--hub-ref-font-size-lg, 1.25rem) | length | Toggler button font size |
--hub-nav-toggler-padding-x | var(--hub-ref-space-2, 0.5rem) | length | Toggler button horizontal padding |
--hub-nav-toggler-padding-y | var(--hub-ref-space-1, 0.25rem) | length | Toggler button vertical padding |
--hub-nav-vertical-items-overflow-x | hidden | string | Vertical items x-overflow |
--hub-nav-vertical-items-overflow-y | auto | string | Vertical items y-overflow |
--hub-nav-vertical-panel-padding-block | 0 | length | Vertical panel block padding |
--hub-nav-vertical-panel-padding-inline | var(--hub-ref-space-2, 0.5rem) | length | Vertical panel inline padding |
--hub-nav-mobile-accordion-gap | 0.25rem | length | Gap between items in the mobile accordion list |
--hub-nav-mobile-accordion-nested-spacing | 0.25rem | length | Top margin before a nested (child) accordion group |
--hub-nav-mobile-body-padding-block-end | var(--hub-nav-padding-y, 0.5rem) | length | Bottom padding of the mobile panel body |
--hub-nav-mobile-body-padding-inline | var(--hub-nav-padding-x, 1rem) | length | Inline padding of the mobile panel body |
--hub-nav-mobile-border-color | rgba(0, 0, 0, 0.08) | color | Border color of the mobile drawer panel |
--hub-nav-mobile-item-padding-inline | 0.75rem | length | Inline padding of items inside the mobile panel (feeds --hub-nav-item-padding-x) |
--hub-nav-mobile-overlay-position | fixed | string | CSS position of the mobile overlay/panel |
--hub-nav-mobile-root-padding-inline | 0.5rem | length | Inline padding of the mobile root list |
--hub-nav-mobile-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.18) | shadow | Box shadow of the mobile drawer panel |