Page Layout

The Layout components place the header, sidebar, content and table of contents on the page, and adapt them to different screen widths. Leave out the parts you don’t need, or skip them entirely to write your own layout.

A complete example

---
import { Layout, Prose, Sidebar, Toc } from '@minidocs/astro/components';
import '@minidocs/astro/styles.css';
---

<html lang="en">
  <body>
    <Layout.Root>
      <Layout.Header>
        <Layout.Title href="/docs/">My docs</Layout.Title>
        <nav slot="end">...</nav>
      </Layout.Header>

      <Sidebar.Trigger target="sidebar" aria-label="Menu">
        <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
          <path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
        </svg>
      </Sidebar.Trigger>

      <Layout.Sidebar>
        <Sidebar.Root id="sidebar" label="Docs">...</Sidebar.Root>
      </Layout.Sidebar>

      <Layout.Main>
        <Prose>
          <h1>{entry.data.title}</h1>
          <Content />
        </Prose>
      </Layout.Main>

      <Layout.Aside title="On this page">
        <Toc.Root>...</Toc.Root>
      </Layout.Aside>
    </Layout.Root>
  </body>
</html>

Component	Renders	What it is
`Layout.Root`	`<div>`	The whole page
`Layout.Header`	`<header>`	The header fixed at the top. The default slot sits on the left, the `end` slot on the right
`Layout.Title`	`<a>`	The site name or logo in the header
`Layout.Sidebar`	`<aside>`	The column for the sidebar
`Layout.Main`	`<main>`	The column for the content
`Layout.Aside`	`<details>`	The column for the table of contents, with `title` as its heading
`Prose`	`<article>`	Typesetting for Markdown content

At different widths

Width	Layout
Above 75rem	Three columns: sidebar, content, table of contents
50rem to 75rem	Two columns: sidebar, content. The table of contents folds into a button at the top right of the content, which opens it
Below 50rem	One column. The sidebar becomes a drawer that slides in from the left, opened by `Sidebar.Trigger`

When folded, the table of contents button shows the section being read and the reading progress. Sidebar.Trigger only shows on narrow screens, so there is no need to hide it on wide ones.

On wide screens, pages without a table of contents still keep the right column, so the sidebar and content sit in the same place on every page. If no page on the site uses a table of contents, switch to two columns:

@media (width > 75rem) {
  .md-layout {
    grid-template-columns:
      [full-start] minmax(0, 1fr)
      [content-start] var(--md-layout-sidebar-width) minmax(0, var(--md-layout-main-width))
      [content-end] minmax(0, 1fr) [full-end];
    grid-template-areas:
      "header header header header"
      ". sidebar main .";
  }
}

The page itself

With Layout.Root, the default styles also set the page’s background, text color and font, and make the page follow the system’s light or dark mode.

Changing breakpoints

The two breakpoints, 50rem and 75rem, are written in @minidocs/astro/styles/layout.css and cannot be changed through variables. For other breakpoints, leave that file out and write the layout styles yourself, see Styling. At the widths where the table of contents should fold, set --md-layout-aside-collapsible to 1, and Layout.Aside becomes a button that opens it.