Site header
A website header: brand, navigation, actions, and a menu that works without JavaScript on small screens.
Header
<header class="mn-header">
<div class="mn-container mn-header-in">
<a class="mn-header-brand" href="#"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><rect x="3" y="3" width="18" height="18" rx="5"/><path d="M8 7v10h8" stroke="var(--mn-bg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>Ledger</a>
<nav class="mn-header-nav" aria-label="Main"><a href="#" aria-current="page">Product</a><a href="#">Customers</a><a href="#">Pricing</a><a href="#">Changelog</a></nav>
<div class="mn-header-actions"><a class="mn-btn mn-btn-ghost mn-btn-sm mn-header-wide" href="#">Sign in</a><a class="mn-btn mn-btn-sm" href="#">Start free</a></div>
<details class="mn-header-menu"><summary aria-label="Menu"><span class="mn-header-open"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span><span class="mn-header-close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></span></summary>
<nav class="mn-header-panel" aria-label="Menu"><a href="#">Product</a><a href="#">Customers</a><a href="#">Pricing</a><a href="#">Changelog</a><a href="#">Sign in</a></nav>
</details>
</div>
</header>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/site-header.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-header | The header. Blurred page colour with a hairline. mn-header-sticky · mn-header-plain (no background) · mn-header-center (centred nav). |
| mn-header-in | Inner row; put it on the mn-container. |
| mn-header-brand | Logo link (an SVG and a name). |
| mn-header-nav | Main links, shown when the header is at least 54rem wide. aria-current="page" marks the current one. |
| mn-header-actions | Buttons on the right. mn-header-wide hides an action when the header is narrow. |
| mn-header-menu | A <details> with a <summary> button and mn-header-panel: the small-screen menu. Hidden on wide headers. |
| mn-header-open · mn-header-close | Icons inside the summary for the closed and open state. |
Accessibility
- Both navs need aria-label (e.g. “Main” and “Menu”). The summary needs an aria-label such as “Menu”.
- <details> is a native disclosure: Enter and Space open it, and screen readers announce expanded/collapsed.
- Keep the brand link’s accessible name (the visible name or aria-label).
- Layout answers to the section’s own width (container queries), so it works the same in a page, a sidebar or a preview.