Header
The page top bar: brand, navigation, actions and the header dropdown (ng-header-menu), with a built-in mobile pattern that moves items into an overlay. Link ng_header.js (and ng_overlay.js for mobile).
A ng-header holds a ng-header-inner grid with ng-header-left / -center / -right slots. Don't confuse the header dropdown (ng-header-menu, part of this component) with the generic Dropdown: in the header the trigger is an <a>, not a button.
Brand & nav
Links live in a ng-header-nav; mark the current page with is-active.
<header class="ng-header">
<div class="ng-header-inner">
<div class="ng-header-left">
<a href="#" class="ng-header-brand">
<i class="ph-fill ph-cube text-purple fs-2xl mr-10"></i>
<strong>Acme Corp</strong>
</a>
<nav class="ng-header-nav">
<a href="#" class="is-active">Dashboard</a>
<a href="#">Projects</a>
<a href="#">Reports</a>
</nav>
</div>
</div>
</header>Right-side actions
The right slot hosts anything: here a search (an Input group), a primary action and an icon button with a tooltip.
<header class="ng-header">
<div class="ng-header-inner">
<div class="ng-header-left">
<a href="#" class="ng-header-brand">
<i class="ph-fill ph-cube text-purple fs-2xl mr-10"></i>
<strong>Acme Corp</strong>
</a>
</div>
<div class="ng-header-right">
<div class="ng-input-group">
<span class="ng-input-addon"><i class="ph ph-magnifying-glass"></i></span>
<input type="search" class="ng-input" placeholder="Search…">
</div>
<button type="button" class="ng-btn ng-btn-primary-soft"><i class="ph ph-plus"></i> New</button>
<button type="button" class="ng-btn quad ng-btn-mute-outline" data-tooltip="Settings" data-tooltip-pos="bottom"><i class="ph ph-gear"></i></button>
</div>
</div>
</header>User menu (header dropdown)
The canonical account menu: a ng-header-menu align-right with an avatar trigger; panel items pair a ng-badge ng-badge-clight quad icon chip with the label, separated by ng-header-divider. Click the avatar:
<header class="ng-header">
<div class="ng-header-inner">
<div class="ng-header-left">
<a href="#" class="ng-header-brand">
<i class="ph-fill ph-cube text-purple fs-2xl mr-10"></i>
<strong>Acme Corp</strong>
</a>
</div>
<div class="ng-header-right">
<nav class="ng-header-nav">
<a href="#"><span class="ng-badge ng-badge-clight quad"><i class="ph-duotone ph-bell fs-xl text-purple"></i></span></a>
<div class="ng-header-menu align-right">
<a href="#" class="ng-header-menu-trigger"><div class="ng-avatar circle bg-purple">CP</div></a>
<div class="ng-header-menu-panel">
<a href="#"><span class="ng-badge ng-badge-clight quad"><i class="ph-duotone ph-user fs-xl text-info"></i></span> Profile</a>
<a href="#"><span class="ng-badge ng-badge-clight quad"><i class="ph-duotone ph-sliders fs-xl text-purple"></i></span> Preferences</a>
<div class="ng-header-divider"></div>
<a href="#"><i class="ph-fill ph-sign-out fs-xl"></i> Logout</a>
</div>
</div>
</nav>
</div>
</div>
</header>Mobile pattern
Tag the items with data-on-mobile="overlay-id": below md they move into the overlay's [data-ng-mobile-target], and the hamburger (data-ng-mobile) appears. Resize the window to try it.
<header class="ng-header">
<div class="ng-header-inner">
<div class="ng-header-left">
<a href="#" class="ng-header-brand">
<i class="ph-fill ph-cube text-purple fs-2xl mr-10"></i>
<strong>Acme Corp</strong>
</a>
</div>
<div class="ng-header-right">
<nav class="ng-header-nav">
<a href="#" class="is-active" data-on-mobile="hdr-mobile">Dashboard</a>
<a href="#" data-on-mobile="hdr-mobile">Projects</a>
<a href="#" data-on-mobile="hdr-mobile">Reports</a>
<button type="button" class="ng-overlay-toggle" data-ng-overlay="hdr-mobile" data-ng-mobile aria-label="Main menu">
<span class="ng-toggle-box burger"></span>
</button>
</nav>
</div>
</div>
</header>
<!-- Overlay target: the data-on-mobile items move in here below 768px -->
<div id="hdr-mobile" class="ng-overlay" aria-hidden="true">
<div class="ng-overlay-panel">
<div class="ng-overlay-header pxy-16">
<strong>Menu</strong>
<button type="button" class="ng-btn ng-btn-mute-ghost circle ng-overlay-close" aria-label="Close"><i class="ph ph-x"></i></button>
</div>
<div class="ng-overlay-body pxy-16" data-ng-mobile-target></div>
</div>
</div>Sticky
Add sticky-header to fix the header on top; the following ng-layout / ng-content / ng-container are offset automatically by --ng-header-height. This very site uses it.
Anatomy
ng-header ng-header-inner ng-header-left ng-header-center ng-header-right ng-header-brand ng-header-nav ng-header-divider ng-header-panel Header dropdown
ng-header-menu ng-header-menu-trigger ng-header-menu-panel align-left align-center align-right is-open Modifiers & mobile
sticky-header is-active data-on-mobile="overlay-id" data-ng-mobile-target data-ng-mobile Reference
Generated from the component source (_ng_header.scss · ng_header.js).
Component info
| Name | header |
|---|---|
| Type | css+js |
| Version | css 1.1.2 · js 1.1.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-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-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