# Docs layout · MIAN

A documentation page: navigation on the left, the reading column, and an “on this page” list on the right, collapsing to a menu on small screens.

- Id: `docs-layout` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/docs-layout
- Use for: documentation site, developer docs, knowledge base, help center, guide with table of contents.
- On a page: frame · prominence low · density medium.
- Alternatives: article, app-shell.
- Avoid: Code as screenshots; walls of text without headings.

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-docs`: The wrapper (a container).
- `mn-docs-in`: The grid; put it on an mn-container. One column, then nav + content (56rem), then nav + content + table of contents (76rem).
- `mn-docs-nav`: The sticky navigation column (holds an mn-sidebar).
- `mn-docs-picker`: A <details> with the same navigation for narrow screens; hidden once the nav column shows.
- `mn-docs-content`: The reading column (max 46rem). Combine with mn-prose.
- `mn-docs-toc`: The sticky “On this page” list.

## Accessibility

- Label both navigations (aria-label="Documentation" and "On this page").
- Mark the current page with aria-current="page" in the nav.
- The narrow-screen menu is a native <details> disclosure.

## Examples

### Docs page

```html
<div class="mn-docs"><div class="mn-container mn-docs-in">
  <nav class="mn-docs-nav" aria-label="Documentation"><div class="mn-sidebar"><div class="mn-sidebar-group"><div class="mn-sidebar-heading">Start</div><a class="mn-sidebar-link" href="#" aria-current="page">Quickstart</a><a class="mn-sidebar-link" href="#">Authentication</a></div><div class="mn-sidebar-group"><div class="mn-sidebar-heading">API</div><a class="mn-sidebar-link" href="#">Messages</a><a class="mn-sidebar-link" href="#">Webhooks</a></div></div></nav>
  <div class="mn-docs-content">
    <details class="mn-docs-picker"><summary>Quickstart <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary><div class="mn-sidebar"><a class="mn-sidebar-link" href="#" aria-current="page">Quickstart</a><a class="mn-sidebar-link" href="#">Authentication</a><a class="mn-sidebar-link" href="#">Messages</a></div></details>
    <div class="mn-prose"><h1 id="dq-start">Quickstart</h1><p>Send your first message in under five minutes.</p><h2 id="dq-key">Get a key</h2><p>Create a key in the dashboard and keep it on the server.</p></div>
  </div>
  <nav class="mn-docs-toc" aria-label="On this page"><h2>On this page</h2><ul><li><a href="#dq-start">Quickstart</a></li><li><a href="#dq-key">Get a key</a></li></ul></nav>
</div></div>
```

## Source

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