stable css 2.1.1 · js 2.0.0
header
Responsive header. Moves [data-on-mobile] items into overlay below 768px and restores on desktop. Manages header menus with outside-click + ESC close. Transparent-over-hero mode: data-transparent adds .is-scrolled past data-scroll-offset (default 20px) for solid-on-scroll. Nav variant .ng-header-nav-line (animated indicator); active item via .is-active / [aria-current="page"] (BREAKING 2.0.0: .active removed).
Component info
| Name | header |
|---|---|
| Type | css+js |
| Version | css 2.1.1 · js 2.0.0 |
| Status | stable |
| CSS | /assets/css/components/_ng_header.scss |
| JS | /assets/js/ng_header.js |
Classes
.ng-badge.ng-btn.ng-container.ng-content.ng-header.ng-header-brand.ng-header-center.ng-header-divider.ng-header-inner.ng-header-item-section.ng-header-left.ng-header-menu.ng-header-menu-panel.ng-header-menu-trigger.ng-header-nav.ng-header-nav-line.ng-header-panel.ng-header-right.ng-header-topbar.ng-header-topbar-center.ng-header-topbar-left.ng-header-topbar-right.ng-layout.ng-overlay.ng-overlay-body.ng-overlay-panel.ng-overlay-toggle Tokens
--ng-header-active-link--ng-header-background--ng-header-border-bottom--ng-header-color--ng-header-color-brand--ng-header-gap--ng-header-hover-bg--ng-header-menu-arrow-size--ng-header-menu-bg--ng-header-menu-border--ng-header-menu-color--ng-header-menu-divider--ng-header-menu-hover-bg--ng-header-menu-item-padding-x--ng-header-menu-item-padding-y--ng-header-menu-offset--ng-header-menu-padding-y--ng-header-menu-shadow--ng-header-nav-active-color--ng-header-nav-font-size--ng-header-nav-font-weight--ng-header-nav-gap--ng-header-nav-indicator-color--ng-header-nav-indicator-glow--ng-header-nav-indicator-height--ng-header-nav-indicator-offset--ng-header-nav-link-padding-x--ng-header-nav-link-padding-y--ng-header-padding-x--ng-header-padding-y--ng-header-scrolled-bg--ng-header-topbar-bg--ng-header-topbar-color--ng-header-topbar-min-h--ng-header-topbar-pad-y