Composant Menu de Navigation Angular | ng-hub-ui-nav
Composant de navigation Angular avec dropdowns, panneaux drill-down, repli responsive, intégration au Router et theming via variables CSS.
Styles
Mixins et 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 | Paramètres | 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>` |
Variables CSS
Personnalisez chaque pixel avec 120 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
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 | Par défaut | Type | Description |
|---|---|---|---|
--hub-nav-accordion-indent | var(--hub-ref-space-3, 1rem) | length | Indentation à gauche par niveau d'imbrication en mode 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 | Couleur d'arrière-plan de la barre de navigation. |
--hub-nav-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Couleur de la bordure de la barre de navigation. |
--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 | Couleur du texte du brand. |
--hub-nav-brand-font-size | var(--hub-ref-font-size-lg, 1.25rem) | length | Taille de police du texte du brand. |
--hub-nav-brand-font-weight | var(--hub-ref-font-weight-semibold, 600) | number | Graisse de police du texte du brand. |
--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 | Couleur de base du texte de la navigation. |
--hub-nav-dropdown-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Couleur d'arrière-plan des panneaux dropdown. |
--hub-nav-dropdown-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Couleur de la bordure des panneaux dropdown. |
--hub-nav-dropdown-border-radius | var(--hub-nav-item-border-radius, var(--hub-ref-radius-sm, 0.25rem)) | length | Rayon de bordure des panneaux dropdown. |
--hub-nav-dropdown-color | var(--hub-sys-text-primary, #212529) | color | Dropdown menu text color |
--hub-nav-dropdown-min-width | 12rem | length | Largeur minimale des panneaux dropdown. |
--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 | Ombre portée des panneaux dropdown. |
--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 | Espace entre les éléments du 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 | Hauteur de la barre de navigation. |
--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 | Espace entre l'icône et le texte du libellé. |
--hub-nav-icon-size | var(--hub-ref-icon-size, 1em) | length | Taille des icônes des éléments de navigation. |
--hub-nav-item-active-bg | var(--hub-nav-accent-subtle) | color | Couleur d'arrière-plan lorsque l'élément est actif. |
--hub-nav-item-active-color | var(--hub-nav-accent) | color | Couleur du texte lorsque l'élément est actif. |
--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 | Rayon de bordure des éléments du nav. |
--hub-nav-item-color | var(--hub-sys-text-primary, #212529) | color | Couleur du texte des éléments du nav. |
--hub-nav-item-disabled-color | var(--hub-sys-text-muted, #6c757d) | color | Couleur du texte des éléments désactivés. |
--hub-nav-item-disabled-opacity | var(--hub-sys-opacity-disabled, 0.65) | number | Opacité des éléments désactivés. |
--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 | Couleur d'arrière-plan au survol. |
--hub-nav-item-hover-color | var(--hub-nav-accent) | color | Couleur du texte au survol. |
--hub-nav-item-padding-x | var(--hub-nav-mobile-item-padding-inline, 0.75rem) | length | Rembourrage horizontal à l'intérieur des éléments du nav. |
--hub-nav-item-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Rembourrage vertical à l'intérieur des éléments du 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 | Couleur de l'arrière-plan derrière le panneau mobile. |
--hub-nav-mobile-bg | var(--hub-sys-surface-page, #fff) | color | Couleur d'arrière-plan du panneau mobile. |
--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 | Minutage de transition pour l'animation d'ouverture/fermeture du panneau mobile. |
--hub-nav-mobile-width | 18rem | length | Largeur du panneau mobile 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 | Rembourrage horizontal du conteneur du nav. |
--hub-nav-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Rembourrage vertical du conteneur du nav. |
--hub-nav-panel-back-color | var(--hub-sys-text-primary, #212529) | color | Couleur du bouton de retour dans l'en-tête du panneau. |
--hub-nav-panel-back-hover-bg | var(--hub-sys-state-hover-bg, rgba(0, 0, 0, 0.075)) | color | Arrière-plan au survol des boutons de l'en-tête du panneau. |
--hub-nav-panel-back-size | 2rem | length | Panel back button size |
--hub-nav-panel-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Couleur d'arrière-plan des panneaux. |
--hub-nav-panel-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Couleur de la bordure entre les panneaux. |
--hub-nav-panel-border-width | 1px | length | Side panel border width |
--hub-nav-panel-color | var(--hub-sys-text-primary, #212529) | color | Couleur du texte à l'intérieur des panneaux. |
--hub-nav-panel-header-bg | var(--hub-sys-surface-page, #fff) | color | Couleur d'arrière-plan de l'en-tête du panneau. |
--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 | Hauteur de l'en-tête du panneau. |
--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 | Ombre portée des panneaux. |
--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 | Largeur par défaut de chaque panneau. |
--hub-nav-panel-zindex | var(--hub-sys-zindex-dropdown, 1000) | number | Ordre d'empilement des panneaux (doit être inférieur au z-index du 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 |