header navigation
A brand, ordinary navigation links, and optional actions. Add a small enhancement for a single-row mobile menu.
Example
Ordinary links, one quiet header. Try Menu when the container is narrow.
Right-aligned links
Ordinary links, one quiet header. Try Menu when the container is narrow.
Narrow container
Ordinary links, one quiet header. Try Menu when the container is narrow.
Nested navigation
Add compact dropdowns or rich link panels using the navigation menu pattern. The same groups become inline disclosures inside the mobile Menu.
Basic usage
Use a native header around m-header for the page banner. The custom element supplies layout and styling. Import the optional module for responsive collapse.
<script type="module" src="header.js"></script>
<header>
<m-header align="end">
<a data-brand href="../index.html">mica</a>
<nav id="primary-nav" aria-label="Primary">
<a href="../index.html">Overview</a>
<a href="button.html">Components</a>
<a href="header.html" aria-current="page">Navigation</a>
<a data-compact href="#usage">Get started</a>
</nav>
<div data-actions><a class="btn" data-variant="primary" href="#usage">Get started</a></div>
<button type="button" data-menu popovertarget="primary-nav">Menu</button>
</m-header>
</header>API
Content/markup contract
| Part | Contract | Description |
|---|---|---|
| Brand | Direct a[data-brand], optional | Authored text, image, or logo. Supply an accessible name and a real destination. |
| Navigation | One direct nav containing direct links; opt into nested disclosures with data-navigation-menu | Give it a distinct accessible label. For collapse it needs an ID matching the Menu button's popovertarget. |
| Actions | Direct [data-actions], optional | Existing buttons or links, aligned at the end. Hidden when collapsed; author equivalent destinations in the nav with data-compact when they must remain available. |
| Compact destination | Direct nav > a[data-compact], optional | Visible only in the collapsed panel. Use for secondary destinations represented by desktop actions. Each instance still needs its own unique IDs, if any. |
| Menu trigger | Direct button[data-menu][popovertarget], optional | Use type="button" and a visible Menu label. Hidden until enhancement activates collapse. Without a correctly connected trigger the nav stays inline. |
Attributes and state
| Name | Target | Default | Description |
|---|---|---|---|
align="start | end" | m-header | start | Aligns desktop links within their flexible region. end means right in LTR and left in RTL. The compact panel starts at the top in both cases. |
aria-current="page" | Navigation link | — | Application-owned current destination, with neutral fill and stronger text. Navigation uses ordinary Tab and Enter behavior. |
aria-disabled="true" | Navigation link | — | Dimmed presentation only. Prefer omitting unavailable destinations. If shown, omit href and use role="link"; ARIA alone never prevents navigation. |
Styling
| Property | Default | Description |
|---|---|---|
--header-pad | var(--space-sm) | Block padding. |
--header-gutter | var(--space-md) | Inline padding. |
--header-gap | var(--space-md) | Gap between brand, navigation, and actions. |
--header-nav-align | start | Desktop link alignment; align="end" sets this to end. |
--header-font-size | 0.875rem | Link text size. |
--header-font-weight | 500 | Default link weight. |
--header-strong-weight | 650 | Brand and current-page weight. |
--header-target-height | 2.75rem | Minimum link height in the compact panel. |
Responsive enhancement
header.js registers m-header. Below a container content width of 40rem, it turns the same authored nav into an automatic native popover and exposes the Menu button. The desktop action group moves out of the tab order with its hidden presentation. The module does not create links, clone navigation, choose the current page, or handle routing.
The panel aligns with the header, opens above when there is more room there, and scrolls internally if necessary. Escape and outside clicks dismiss it through the browser. Following a link also closes it; modified clicks retain normal new-tab behavior. On resize, focus moves out of any content being hidden to the Menu button, or from the disappearing Menu button to the first navigation link.
Omit the import or the Menu trigger to keep a wrapping inline header. Without JavaScript or Popover support, primary navigation remains visible and native links still work. Keep the nav free of an authored popover attribute; the module manages it only while collapsed. No custom events are emitted.
Accessibility and composition
Use one page-level banner, a labeled nav, and real links. Do not use role="menu" or menu-item roles for site navigation. Preserve brand, navigation, actions, then Menu in DOM order. Compact links should cover the destinations hidden with desktop actions; complex forms or controls are better placed in a separately authored drawer.
Keep the brand concise and use this pattern for a handful of destinations. For large navigation trees, compose a sidebar or drawer. Sticky positioning is consumer-owned: apply position: sticky; inset-block-start: 0 to the native header with a suitable stacking level.