# Page header · MIAN

The top of an application page: where you are, what this is, its facts and the actions you can take.

- Id: `page-header` · Category: Navigation · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/page-header
- Use for: app page header, page title with actions, detail page heading, title and buttons, record header.
- Alternatives: breadcrumbs, navbar.

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-pagehead`: The header, with a rule beneath.
- `mn-pagehead-row`: Title block on the left, actions on the right; wraps on narrow widths.
- `mn-pagehead-title · mn-pagehead-desc`: The <h1> and one sentence under it.
- `mn-pagehead-meta`: A list of facts with icons: owner, status, updated.
- `mn-pagehead-actions`: Buttons. One primary at most.

## Accessibility

- The title is the page’s only <h1>.
- Breadcrumbs go in a <nav aria-label="Breadcrumb"> above the title.
- Put the primary action last in the source so it sits at the end, where people look for it.

## Examples

### Detail page

```html
<header class="mn-pagehead">
  <nav class="mn-breadcrumbs" aria-label="Breadcrumb"><ol><li><a href="#">Projects</a></li><li><a href="#">Harbour office</a></li><li><span aria-current="page">Fit-out</span></li></ol></nav>
  <div class="mn-pagehead-row">
    <div><h1 class="mn-pagehead-title">Fit-out, floors 2–4</h1>
      <ul class="mn-pagehead-meta"><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg> Ilse Brandt</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg> Due 14 Nov 2026</li><li><span class="mn-badge mn-badge-soft mn-success">On track</span></li></ul></div>
    <div class="mn-pagehead-actions"><button class="mn-btn mn-btn-outline" type="button"><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 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13"/></svg> Share</button><button class="mn-btn" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Add task</button></div>
  </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/page-header/source