Estilos

Mixins y estilos

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	Parámetros	Descripción
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>`

Variables CSS

Personaliza cada detalle con 120 variables CSS. Sobrescríbelas en :root o acótalas a un contenedor.

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	Por defecto	Tipo	Descripción
`--hub-nav-accordion-indent`	`var(--hub-ref-space-3, 1rem)`	length	Sangría izquierda por nivel de anidamiento en el modo accordion vertical.
`--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	Color de fondo de la barra de navegación.
`--hub-nav-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Color del borde de la barra de navegación.
`--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	Color de texto de la marca.
`--hub-nav-brand-font-size`	`var(--hub-ref-font-size-lg, 1.25rem)`	length	Tamaño de fuente del texto de la marca.
`--hub-nav-brand-font-weight`	`var(--hub-ref-font-weight-semibold, 600)`	number	Grosor de la fuente del texto de la marca.
`--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	Color de texto base de la navegación.
`--hub-nav-dropdown-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	Color de fondo de los paneles desplegables.
`--hub-nav-dropdown-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Color del borde de los paneles desplegables.
`--hub-nav-dropdown-border-radius`	`var(--hub-nav-item-border-radius, var(--hub-ref-radius-sm, 0.25rem))`	length	Radio de borde de los paneles desplegables.
`--hub-nav-dropdown-color`	`var(--hub-sys-text-primary, #212529)`	color	Dropdown menu text color
`--hub-nav-dropdown-min-width`	`12rem`	length	Anchura mínima de los paneles desplegables.
`--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	Sombra de caja de los paneles desplegables.
`--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	Espacio entre los elementos del nav.
`--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	Altura de la barra de navegación.
`--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	Espacio entre el icono y el texto de la etiqueta.
`--hub-nav-icon-size`	`var(--hub-ref-icon-size, 1em)`	length	Tamaño de los iconos de los elementos de navegación.
`--hub-nav-item-active-bg`	`var(--hub-nav-accent-subtle)`	color	Color de fondo cuando el elemento está activo.
`--hub-nav-item-active-color`	`var(--hub-nav-accent)`	color	Color de texto cuando el elemento está activo.
`--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	Radio de borde de los elementos del nav.
`--hub-nav-item-color`	`var(--hub-sys-text-primary, #212529)`	color	Color de texto de los elementos del nav.
`--hub-nav-item-disabled-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Color de texto de los elementos deshabilitados.
`--hub-nav-item-disabled-opacity`	`var(--hub-sys-opacity-disabled, 0.65)`	number	Opacidad de los elementos deshabilitados.
`--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	Color de fondo al pasar el cursor.
`--hub-nav-item-hover-color`	`var(--hub-nav-accent)`	color	Color de texto al pasar el cursor.
`--hub-nav-item-padding-x`	`var(--hub-nav-mobile-item-padding-inline, 0.75rem)`	length	Padding horizontal dentro de los elementos del nav.
`--hub-nav-item-padding-y`	`var(--hub-ref-space-2, 0.5rem)`	length	Padding vertical dentro de los elementos del nav.
`--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	Color del fondo tras el panel móvil.
`--hub-nav-mobile-bg`	`var(--hub-sys-surface-page, #fff)`	color	Color de fondo del panel móvil.
`--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	Temporización de la transición para la animación de apertura/cierre del panel móvil.
`--hub-nav-mobile-width`	`18rem`	length	Anchura del panel móvil offcanvas.
`--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	Padding horizontal del contenedor del nav.
`--hub-nav-padding-y`	`var(--hub-ref-space-2, 0.5rem)`	length	Padding vertical del contenedor del nav.
`--hub-nav-panel-back-color`	`var(--hub-sys-text-primary, #212529)`	color	Color del botón de retroceso en la cabecera del panel.
`--hub-nav-panel-back-hover-bg`	`var(--hub-sys-state-hover-bg, rgba(0, 0, 0, 0.075))`	color	Fondo al pasar el cursor de los botones de la cabecera del panel.
`--hub-nav-panel-back-size`	`2rem`	length	Panel back button size
`--hub-nav-panel-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	Color de fondo de los paneles.
`--hub-nav-panel-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Color del borde entre los paneles.
`--hub-nav-panel-border-width`	`1px`	length	Side panel border width
`--hub-nav-panel-color`	`var(--hub-sys-text-primary, #212529)`	color	Color de texto dentro de los paneles.
`--hub-nav-panel-header-bg`	`var(--hub-sys-surface-page, #fff)`	color	Color de fondo de la cabecera del panel.
`--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	Altura de la cabecera del panel.
`--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	Sombra de caja de los paneles.
`--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	Anchura predeterminada de cada panel.
`--hub-nav-panel-zindex`	`var(--hub-sys-zindex-dropdown, 1000)`	number	Orden de apilamiento de los paneles (debe ser menor que el z-index del dropdown).
`--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