Stile

Mixins und Stile

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	Parameter	Beschreibung
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-Variablen

Gestalte jedes Pixel mit 120 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen 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	Standard	Typ	Beschreibung
`--hub-nav-accordion-indent`	`var(--hub-ref-space-3, 1rem)`	length	Linke Einrückung pro Verschachtelungsebene im vertikalen accordion-Modus.
`--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	Hintergrundfarbe der Navigationsleiste.
`--hub-nav-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Rahmenfarbe der Navigationsleiste.
`--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	Schriftfarbe des Brand.
`--hub-nav-brand-font-size`	`var(--hub-ref-font-size-lg, 1.25rem)`	length	Schriftgröße des Brand-Texts.
`--hub-nav-brand-font-weight`	`var(--hub-ref-font-weight-semibold, 600)`	number	Schriftstärke des Brand-Texts.
`--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	Basis-Schriftfarbe der Navigation.
`--hub-nav-dropdown-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	Hintergrundfarbe der Dropdown-Panels.
`--hub-nav-dropdown-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Rahmenfarbe der Dropdown-Panels.
`--hub-nav-dropdown-border-radius`	`var(--hub-nav-item-border-radius, var(--hub-ref-radius-sm, 0.25rem))`	length	Rahmenradius der Dropdown-Panels.
`--hub-nav-dropdown-color`	`var(--hub-sys-text-primary, #212529)`	color	Dropdown menu text color
`--hub-nav-dropdown-min-width`	`12rem`	length	Mindestbreite der 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	Schlagschatten der 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	Abstand zwischen nav-Elementen.
`--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	Höhe der Navigationsleiste.
`--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	Abstand zwischen Symbol und Label-Text.
`--hub-nav-icon-size`	`var(--hub-ref-icon-size, 1em)`	length	Größe der Navigationselement-Symbole.
`--hub-nav-item-active-bg`	`var(--hub-nav-accent-subtle)`	color	Hintergrundfarbe, wenn das Element aktiv ist.
`--hub-nav-item-active-color`	`var(--hub-nav-accent)`	color	Schriftfarbe, wenn das Element aktiv ist.
`--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	Rahmenradius der nav-Elemente.
`--hub-nav-item-color`	`var(--hub-sys-text-primary, #212529)`	color	Schriftfarbe der nav-Elemente.
`--hub-nav-item-disabled-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Schriftfarbe für deaktivierte Elemente.
`--hub-nav-item-disabled-opacity`	`var(--hub-sys-opacity-disabled, 0.65)`	number	Deckkraft für deaktivierte Elemente.
`--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	Hintergrundfarbe beim Überfahren.
`--hub-nav-item-hover-color`	`var(--hub-nav-accent)`	color	Schriftfarbe beim Überfahren.
`--hub-nav-item-padding-x`	`var(--hub-nav-mobile-item-padding-inline, 0.75rem)`	length	Horizontaler Innenabstand innerhalb der nav-Elemente.
`--hub-nav-item-padding-y`	`var(--hub-ref-space-2, 0.5rem)`	length	Vertikaler Innenabstand innerhalb der nav-Elemente.
`--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	Hintergrundfarbe des Backdrops hinter dem mobilen Panel.
`--hub-nav-mobile-bg`	`var(--hub-sys-surface-page, #fff)`	color	Hintergrundfarbe des mobilen Panels.
`--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	Timing des Übergangs für die Öffnen-/Schließen-Animation des mobilen Panels.
`--hub-nav-mobile-width`	`18rem`	length	Breite des mobilen Offcanvas-Panels.
`--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	Horizontaler Innenabstand des nav-Containers.
`--hub-nav-padding-y`	`var(--hub-ref-space-2, 0.5rem)`	length	Vertikaler Innenabstand des nav-Containers.
`--hub-nav-panel-back-color`	`var(--hub-sys-text-primary, #212529)`	color	Farbe des Zurück-Buttons im Panel-Header.
`--hub-nav-panel-back-hover-bg`	`var(--hub-sys-state-hover-bg, rgba(0, 0, 0, 0.075))`	color	Hintergrund der Panel-Header-Buttons beim Überfahren.
`--hub-nav-panel-back-size`	`2rem`	length	Panel back button size
`--hub-nav-panel-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	Hintergrundfarbe der Panels.
`--hub-nav-panel-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Rahmenfarbe zwischen den Panels.
`--hub-nav-panel-border-width`	`1px`	length	Side panel border width
`--hub-nav-panel-color`	`var(--hub-sys-text-primary, #212529)`	color	Schriftfarbe innerhalb der Panels.
`--hub-nav-panel-header-bg`	`var(--hub-sys-surface-page, #fff)`	color	Hintergrundfarbe des Panel-Headers.
`--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	Höhe des Panel-Headers.
`--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	Schlagschatten der 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	Standardbreite jedes Panels.
`--hub-nav-panel-zindex`	`var(--hub-sys-zindex-dropdown, 1000)`	number	Stapelreihenfolge der Panels (sollte niedriger als der z-index des Dropdowns sein).
`--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