# Sidenav

Source: https://iriscss.com/documentation/1/components/sidenav/

(added in 1.3)

A vertical menu for docs, admin and settings pages, with groups that collapse and a fold for small screens. No JavaScript.

Put `.sidenav` on a `nav`. Each `details` is a group, and its `summary` is the group label. Links go in a `ul`.

```html
<nav class="sidenav" aria-label="Example">
  <ul>
    <li><a href="#">All topics</a></li>
  </ul>
  <details open>
    <summary>Components</summary>
    <ul>
      <li><a href="#">Alert</a></li>
      <li><a href="#" aria-current="page">Card</a></li>
      <li><a href="#">Modal</a></li>
    </ul>
  </details>
  <details>
    <summary>Layout</summary>
    <ul>
      <li><a href="#">Grid</a></li>
      <li><a href="#">Hero</a></li>
    </ul>
  </details>
</nav>
```

## Current page

`aria-current="page"` on a link draws a bar on the guide line and makes the text bold. A closed group that holds the current page gets a stronger label, so readers still see where they are.

CSS cannot open a group, so add `open` to the group that holds the current page when you render it. Give the groups the same `name` to keep only one open at a time.

## Nesting

A list or a `details` inside an `li` is one level deeper, with its own guide line.

```html
<nav class="sidenav" aria-label="Nesting example">
  <details open>
    <summary>Components</summary>
    <ul>
      <li><a href="#">Alert</a></li>
      <li>
        <details open>
          <summary>Forms</summary>
          <ul>
            <li><a href="#" aria-current="page">Input</a></li>
            <li><a href="#">Select</a></li>
          </ul>
        </details>
      </li>
      <li><a href="#">Modal</a></li>
    </ul>
  </details>
</nav>
```

## Groups that stay open

A heading followed by a `ul` is a group that does not collapse. It looks the same as a `details` group, so you can mix them.

```html
<nav class="sidenav" aria-label="Static groups example">
  <h2>Account</h2>
  <ul>
    <li><a href="#" aria-current="page">Profile</a></li>
    <li><a href="#">Security</a></li>
  </ul>
  <h2>Billing</h2>
  <ul>
    <li><a href="#">Plan</a></li>
    <li><a href="#">Invoices</a></li>
  </ul>
</nav>
```

## Icons

A summary can start with an `.icon` or an inline SVG. It lines up with the label.

```html
<nav class="sidenav" aria-label="Icons example">
  <details open>
    <summary>
      <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7h18M3 12h18M3 17h18"/></svg>
      Settings
    </summary>
    <ul>
      <li><a href="#" aria-current="page">General</a></li>
      <li><a href="#">Notifications</a></li>
    </ul>
  </details>
</nav>
```

## Small screens

Wrap the sidenav in a `details` with a summary. On wide screens the summary hides and the menu shows. On screens under 48rem, or when the aside is wider than 24rem because it sits above the content, the menu folds behind the summary. This site's own menu works this way. The example below is folded because the preview is wider than 24rem.

```html
<details>
  <summary>Menu</summary>
  <nav class="sidenav" aria-label="Folding example">
    <ul>
      <li><a href="#" aria-current="page">Profile</a></li>
      <li><a href="#">Security</a></li>
    </ul>
  </nav>
</details>
```

The fold measures the element around the `details`, so that element needs a width from its layout. An `aside` in `.with-sidebar` has one. Browsers without `::details-content` keep the menu folded on every screen, and it opens with a click.

## Sticky

`.sticky` keeps the menu in view while the page scrolls, below a `.navbar.sticky` when the page has one. A menu taller than the screen scrolls on its own.

```html
<div class="container with-sidebar">
  <aside>
    <details>
      <summary>Menu</summary>
      <nav class="sidenav sticky" aria-label="Documentation">...</nav>
    </details>
  </aside>
  <main>...</main>
</div>
```

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-sidenav-font-size` | `0.9375rem` |  |
| `--i-sidenav-indent` | `0.875rem` | Indent of a nested list, where its guide line sits |
| `--i-sidenav-link-padding-block` | `0.25rem` |  |
| `--i-sidenav-link-padding-inline` | `1rem` |  |
| `--i-sidenav-sticky-offset` | `var(--i-spacing)` | Gap above a sticky menu, added to the navbar height under a sticky navbar |
| `--i-sidenav-link-color-text` | `var(--i-color-subtle)` |  |
| `--i-sidenav-link-hover-color-text` | `var(--i-color-text)` |  |
| `--i-sidenav-label-color-text` | `var(--i-h3-color-text)` |  |
| `--i-sidenav-color-border` | `var(--i-color-subtle-border)` |  |
| `--i-sidenav-current-color-border` | `var(--i-color-primary)` |  |
| `--i-sidenav-current-color-text` | `var(--i-h1-color-text)` |  |