Referencia API

Inputs

items (Obligatorio)

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

Tipo: Partial<HubNavConfig>

Por defecto: {}

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

navClass

Tipo: string

Por defecto: ''

Additional CSS class applied to the nav container element.

itemTemplate

Tipo: TemplateRef<HubNavItemTemplateContext> | null

Por defecto: null

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

Outputs

itemClick

Tipo: OutputEmitterRef<HubNavItem>

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

dropdownOpen

Tipo: OutputEmitterRef<HubNavItem>

Emitted when a dropdown item is opened.

dropdownClose

Tipo: OutputEmitterRef<HubNavItem>

Emitted when a dropdown item is closed.

mobileToggle

Tipo: OutputEmitterRef<boolean>

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

panelChange

Tipo: 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.

Ejemplo:

hubNavEnd

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

Ejemplo:

hubNavItemTemplate

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

Ejemplo:

Variables CSS

Layout

Control the overall nav dimensions, padding, and spacing.

`--hub-nav-height`

Tipo: length

Por defecto:3.5rem

Height of the navigation bar.

Ejemplos:

3rem4remauto

`--hub-nav-padding-x`

Tipo: length

Por defecto:1rem

Horizontal padding of the nav container.

Ejemplos:

0.5rem1.5rem2rem

`--hub-nav-padding-y`

Tipo: length

Por defecto:0.5rem

Vertical padding of the nav container.

Ejemplos:

0.25rem0.75rem1rem

`--hub-nav-gap`

Tipo: length

Por defecto:0.25rem

Gap between nav items.

Ejemplos:

00.5rem1rem

Colors & Background

Control the nav color scheme and borders.

`--hub-nav-bg`

Tipo: color

Por defecto:#fff

Background color of the navigation bar.

Ejemplos:

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

`--hub-nav-color`

Tipo: color

Por defecto:#212529

Base text color of the navigation.

Ejemplos:

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

`--hub-nav-border-color`

Tipo: color

Por defecto:#dee2e6

Border color of the navigation bar.

Ejemplos:

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

Items

Styling for individual navigation items across all states.

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

Tipo: length

Por defecto:1rem

Horizontal padding inside nav items.

Ejemplos:

0.5rem1.25rem1.5rem

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

Tipo: length

Por defecto:0.5rem

Vertical padding inside nav items.

Ejemplos:

0.25rem0.75rem1rem

`--hub-nav-item-color`

Tipo: color

Por defecto:#212529

Text color of nav items.

Ejemplos:

#495057#fffinherit

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

Tipo: length

Por defecto:0.25rem

Border radius of nav items.

Ejemplos:

00.375rem50rem

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

Tipo: color

Por defecto:rgba(0, 0, 0, 0.04)

Background color on hover.

Ejemplos:

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

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

Tipo: color

Por defecto:#0d6efd

Text color on hover.

Ejemplos:

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

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

Tipo: color

Por defecto:#0d6efd

Background color when item is active.

Ejemplos:

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

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

Tipo: color

Por defecto:#fff

Text color when item is active.

Ejemplos:

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

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

Tipo: color

Por defecto:#6c757d

Text color for disabled items.

Ejemplos:

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

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

Tipo: number

Por defecto:0.65

Opacity for disabled items.

Ejemplos:

0.50.41

Dropdown

Customize dropdown panel appearance and positioning.

`--hub-nav-dropdown-bg`

Tipo: color

Por defecto:#fff

Background color of dropdown panels.

Ejemplos:

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

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

Tipo: color

Por defecto:#dee2e6

Border color of dropdown panels.

Ejemplos:

transparent#ccc

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

Tipo: length

Por defecto:0.375rem

Border radius of dropdown panels.

Ejemplos:

00.25rem0.5rem

`--hub-nav-dropdown-shadow`

Tipo: shadow

Por defecto:0 0.5rem 1rem rgba(0, 0, 0, 0.15)

Box shadow of dropdown panels.

Ejemplos:

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

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

Tipo: length

Por defecto:12rem

Minimum width of dropdown panels.

Ejemplos:

10rem15rem200px

Brand

Styling for the brand slot area.

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

Tipo: length

Por defecto:1.25rem

Font size of the brand text.

Ejemplos:

1rem1.5rem2rem

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

Tipo: number

Por defecto:600

Font weight of the brand text.

Ejemplos:

400700800

`--hub-nav-brand-color`

Tipo: color

Por defecto:#212529

Text color of the brand.

Ejemplos:

#fff#0d6efdinherit

Mobile Panel

Configuration for the responsive mobile navigation panel.

`--hub-nav-mobile-bg`

Tipo: color

Por defecto:#fff

Background color of the mobile panel.

Ejemplos:

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

`--hub-nav-mobile-width`

Tipo: length

Por defecto:18rem

Width of the offcanvas mobile panel.

Ejemplos:

15rem20rem80vw

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

Tipo: color

Por defecto:rgba(0, 0, 0, 0.5)

Backdrop color behind the mobile panel.

Ejemplos:

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

`--hub-nav-mobile-transition`

Tipo: transition

Por defecto:300ms ease

Transition timing for mobile panel open/close animation.

Ejemplos:

200ms ease-in-out400ms ease150ms linear

Accordion & Icons

Vertical accordion indent and icon sizing.

`--hub-nav-accordion-indent`

Tipo: length

Por defecto:1rem

Left indentation per nesting level in vertical accordion mode.

Ejemplos:

0.5rem1.5rem2rem

`--hub-nav-icon-size`

Tipo: length

Por defecto:1.25rem

Size of navigation item icons.

Ejemplos:

1rem1.5rem2rem

`--hub-nav-icon-gap`

Tipo: length

Por defecto:0.5rem

Gap between icon and label text.

Ejemplos:

0.25rem0.75rem1rem

Panel

Styling for the stacked panel drill-down navigation.

`--hub-nav-panel-width`

Tipo: length

Por defecto:16rem

Default width of each panel.

Ejemplos:

14rem18rem20rem

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

Tipo: number

Por defecto:100

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

Ejemplos:

50100200

`--hub-nav-panel-bg`

Tipo: color

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

Background color of panels.

Ejemplos:

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

`--hub-nav-panel-color`

Tipo: color

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

Text color inside panels.

Ejemplos:

#333#fffinherit

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

Tipo: color

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

Border color between panels.

Ejemplos:

transparent#ccc

`--hub-nav-panel-shadow`

Tipo: shadow

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

Box shadow of panels.

Ejemplos:

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

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

Tipo: length

Por defecto:3rem

Height of the panel header.

Ejemplos:

2.5rem3.5rem4rem

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

Tipo: color

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

Background color of the panel header.

Ejemplos:

#fff#e9eceftransparent

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

Tipo: color

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

Color of the back button in the panel header.

Ejemplos:

#212529#0d6efdinherit

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

Tipo: color

Por defecto:rgba(0, 0, 0, 0.04)

Hover background of panel header buttons.

Ejemplos:

#e9ecefrgba(0,0,0,0.08)

Estilos y theming

Todavía no hay ejemplos de estilos documentados. Esta sección incluirá recetas de personalización y ejemplos de theming.