# Site header · MIAN

A website header: brand, navigation, actions, and a menu that works without JavaScript on small screens.

- Id: `site-header` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/site-header
- Use for: website navigation, top menu, logo and links, mobile menu, header with call to action.
- On a page: header · prominence medium · density low. Usually before: hero.
- Alternatives: navbar.
- Avoid: More than five or six links, or more than one primary button.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Header

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/site-header/source