API reference

Inputs

items (Required)

Type: 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

Type: Partial<HubNavConfig>

Default: {}

Partial configuration overrides merged with global defaults. Controls orientation, dropdown trigger, collapse mode, breakpoint, position, and more.

navClass

Type: string

Default: ''

Additional CSS class applied to the nav container element.

itemTemplate

Type: TemplateRef<HubNavItemTemplateContext> | null

Default: null

Optional custom template for rendering nav items via input binding. The hubNavItemTemplate directive takes priority over this input.

Outputs

itemClick

Type: OutputEmitterRef<HubNavItem>

Emitted when a link item is clicked. Provides the clicked HubNavItem.

dropdownOpen

Type: OutputEmitterRef<HubNavItem>

Emitted when a dropdown item is opened.

dropdownClose

Type: OutputEmitterRef<HubNavItem>

Emitted when a dropdown item is closed.

mobileToggle

Type: OutputEmitterRef<boolean>

Emitted when the mobile panel is toggled. Provides true when open, false when closed.

panelChange

Type: OutputEmitterRef<HubNavPanelEvent>

Emitted when a panel is opened, closed, drilled-down, or navigated back. Provides the item, panel index, and action type.

Templates

hubNavStart

Projects custom content in the start slot. Horizontal: visual start (left in LTR, right in RTL). Vertical: top of the primary column.

Example:

hubNavEnd

Projects custom content in the end slot. Horizontal: visual end (right in LTR, left in RTL). Vertical: bottom of the primary column.

Example:

hubNavItemTemplate

Overrides the default item rendering with a custom template. Receives HubNavItemTemplateContext with $implicit (item), active, expanded, and depth properties.

Example:

CSS variables

Layout

Control the overall nav dimensions, padding, and spacing.

`--hub-nav-height`

Type: length

Default:3.5rem

Height of the navigation bar.

Examples:

3rem4remauto

`--hub-nav-padding-x`

Type: length

Default:1rem

Horizontal padding of the nav container.

Examples:

0.5rem1.5rem2rem

`--hub-nav-padding-y`

Type: length

Default:0.5rem

Vertical padding of the nav container.

Examples:

0.25rem0.75rem1rem

`--hub-nav-gap`

Type: length

Default:0.25rem

Gap between nav items.

Examples:

00.5rem1rem

Colors & Background

Control the nav color scheme and borders.

`--hub-nav-bg`

Type: color

Default:#fff

Background color of the navigation bar.

Examples:

#f8f9fatransparentvar(--hub-sys-surface-page)

`--hub-nav-color`

Type: color

Default:#212529

Base text color of the navigation.

Examples:

#333#fffvar(--hub-sys-text-primary)

`--hub-nav-border-color`

Type: color

Default:#dee2e6

Border color of the navigation bar.

Examples:

transparent#cccvar(--hub-sys-border-color-default)

Items

Styling for individual navigation items across all states.

`--hub-nav-item-padding-x`

Type: length

Default:1rem

Horizontal padding inside nav items.

Examples:

0.5rem1.25rem1.5rem

`--hub-nav-item-padding-y`

Type: length

Default:0.5rem

Vertical padding inside nav items.

Examples:

0.25rem0.75rem1rem

`--hub-nav-item-color`

Type: color

Default:#212529

Text color of nav items.

Examples:

#495057#fffinherit

`--hub-nav-item-border-radius`

Type: length

Default:0.25rem

Border radius of nav items.

Examples:

00.375rem50rem

`--hub-nav-item-hover-bg`

Type: color

Default:rgba(0, 0, 0, 0.04)

Background color on hover.

Examples:

#e9ecefrgba(255, 255, 255, 0.1)transparent

`--hub-nav-item-hover-color`

Type: color

Default:#0d6efd

Text color on hover.

Examples:

#0a58ca#fffvar(--hub-sys-color-primary)

`--hub-nav-item-active-bg`

Type: color

Default:#0d6efd

Background color when item is active.

Examples:

#0a58catransparentvar(--hub-sys-color-primary)

`--hub-nav-item-active-color`

Type: color

Default:#fff

Text color when item is active.

Examples:

#0d6efd#212529var(--hub-sys-text-inverse)

`--hub-nav-item-disabled-color`

Type: color

Default:#6c757d

Text color for disabled items.

Examples:

#adb5bdvar(--hub-sys-text-muted)

`--hub-nav-item-disabled-opacity`

Type: number

Default:0.65

Opacity for disabled items.

Examples:

0.50.41

Dropdown

Customize dropdown panel appearance and positioning.

`--hub-nav-dropdown-bg`

Type: color

Default:#fff

Background color of dropdown panels.

Examples:

#f8f9fa#343a40var(--hub-sys-surface-elevated)

`--hub-nav-dropdown-border-color`

Type: color

Default:#dee2e6

Border color of dropdown panels.

Examples:

transparent#ccc

`--hub-nav-dropdown-border-radius`

Type: length

Default:0.375rem

Border radius of dropdown panels.

Examples:

00.25rem0.5rem

`--hub-nav-dropdown-shadow`

Type: shadow

Default:0 0.5rem 1rem rgba(0, 0, 0, 0.15)

Box shadow of dropdown panels.

Examples:

none0 4px 8px rgba(0,0,0,0.1)0 1rem 3rem rgba(0,0,0,0.175)

`--hub-nav-dropdown-min-width`

Type: length

Default:12rem

Minimum width of dropdown panels.

Examples:

10rem15rem200px

Brand

Styling for the brand slot area.

`--hub-nav-brand-font-size`

Type: length

Default:1.25rem

Font size of the brand text.

Examples:

1rem1.5rem2rem

`--hub-nav-brand-font-weight`

Type: number

Default:600

Font weight of the brand text.

Examples:

400700800

`--hub-nav-brand-color`

Type: color

Default:#212529

Text color of the brand.

Examples:

#fff#0d6efdinherit

Mobile Panel

Configuration for the responsive mobile navigation panel.

`--hub-nav-mobile-bg`

Type: color

Default:#fff

Background color of the mobile panel.

Examples:

#f8f9fa#212529var(--hub-sys-surface-page)

`--hub-nav-mobile-width`

Type: length

Default:18rem

Width of the offcanvas mobile panel.

Examples:

15rem20rem80vw

`--hub-nav-mobile-backdrop-bg`

Type: color

Default:rgba(0, 0, 0, 0.5)

Backdrop color behind the mobile panel.

Examples:

rgba(0, 0, 0, 0.3)rgba(0, 0, 0, 0.75)transparent

`--hub-nav-mobile-transition`

Type: transition

Default:300ms ease

Transition timing for mobile panel open/close animation.

Examples:

200ms ease-in-out400ms ease150ms linear

Accordion & Icons

Vertical accordion indent and icon sizing.

`--hub-nav-accordion-indent`

Type: length

Default:1rem

Left indentation per nesting level in vertical accordion mode.

Examples:

0.5rem1.5rem2rem

`--hub-nav-icon-size`

Type: length

Default:1.25rem

Size of navigation item icons.

Examples:

1rem1.5rem2rem

`--hub-nav-icon-gap`

Type: length

Default:0.5rem

Gap between icon and label text.

Examples:

0.25rem0.75rem1rem

Panel

Styling for the stacked panel drill-down navigation.

`--hub-nav-panel-width`

Type: length

Default:16rem

Default width of each panel.

Examples:

14rem18rem20rem

`--hub-nav-panel-z-index`

Type: number

Default:100

Stacking order of panels (should be lower than dropdown z-index).

Examples:

50100200

`--hub-nav-panel-bg`

Type: color

Default:var(--hub-sys-surface-page, #fff)

Background color of panels.

Examples:

#f8f9fa#fffvar(--hub-sys-surface-elevated)

`--hub-nav-panel-color`

Type: color

Default:var(--hub-sys-text-primary, #212529)

Text color inside panels.

Examples:

#333#fffinherit

`--hub-nav-panel-border-color`

Type: color

Default:var(--hub-sys-border-color-default, #dee2e6)

Border color between panels.

Examples:

transparent#ccc

`--hub-nav-panel-shadow`

Type: shadow

Default:inset 4px 0 8px -4px rgba(0, 0, 0, 0.1)

Box shadow of panels.

Examples:

none2px 0 4px rgba(0,0,0,0.05)

`--hub-nav-panel-header-height`

Type: length

Default:3rem

Height of the panel header.

Examples:

2.5rem3.5rem4rem

`--hub-nav-panel-header-bg`

Type: color

Default:var(--hub-sys-surface-elevated, #f8f9fa)

Background color of the panel header.

Examples:

#fff#e9eceftransparent

`--hub-nav-panel-back-color`

Type: color

Default:var(--hub-sys-text-secondary, #6c757d)

Color of the back button in the panel header.

Examples:

#212529#0d6efdinherit

`--hub-nav-panel-back-hover-bg`

Type: color

Default:rgba(0, 0, 0, 0.04)

Hover background of panel header buttons.

Examples:

#e9ecefrgba(0,0,0,0.08)

Styling and theming

No styling examples are documented yet. This section will include customization recipes and theming examples.