Docs layout
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.
Docs page
Quickstart
Quickstart
Send your first message in under five minutes.
Get a key
Create a key in the dashboard and keep it on the server.
<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>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/docs-layout.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-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.