# Nav and breadcrumb

Source: https://iriscss.com/documentation/components/nav/

Lists inside `nav` line up in a row. Inside `aside` they stack. `nav.breadcrumb` adds dividers.

Each list in a `nav` is a group. The first sits at the start and the last at the end. Links get a padded hit area, and `aria-current` marks the current page. Only the nav's own lists form the row, so a list nested in an item keeps its layout, and one class on the nav overrides it.

```html
<nav aria-label="Example">
  <ul>
    <li><strong>Brand</strong></li>
  </ul>
  <ul>
    <li><a href="#" aria-current="page">Home</a></li>
    <li><a href="#">Docs</a></li>
    <li><a href="#" role="button" class="primary">Sign up</a></li>
  </ul>
</nav>
```

## Collapsing menu

Make the link list a popover and add a `.nav-toggle` button for it. The list sits in the nav while there is room, and opens from the button below a 48rem wide nav. For a top bar with a full width panel on phones, use the [navbar](https://iriscss.com/documentation/components/navbar/index.html.md).

```html
<nav aria-label="Collapsing example">
  <ul>
    <li><strong>Brand</strong></li>
  </ul>
  <button class="nav-toggle" popovertarget="nav-menu" aria-label="Menu"></button>
  <ul id="nav-menu" popover data-placement="bottom">
    <li><a href="#">Features</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>
```

## Vertical menu

Inside `aside` the lists stack, for a sidebar menu.

```html
<aside>
  <nav aria-label="Sidebar example">
    <ul>
      <li><a href="#" aria-current="page">Overview</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Settings</a></li>
    </ul>
  </nav>
</aside>
```

## Breadcrumb

`nav.breadcrumb` puts a divider between items. Mark the last link with `aria-current="page"`. The divider flips in right to left text.

```html
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Docs</a></li>
    <li><a href="#" aria-current="page">Nav</a></li>
  </ol>
</nav>
```

## Dropdown

Inside a nav, a button without a class that opens a [dropdown](https://iriscss.com/documentation/components/dropdown/index.html.md#nav) looks like a link.

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-nav-item-padding-block` | `1rem` |  |
| `--i-nav-gap` | `1rem` | Space between the items of a nav list |
| `--i-nav-link-padding-block` | `0.5rem` |  |
| `--i-nav-link-padding-inline` | `0.5rem` |  |
| `--i-nav-breadcrumb-divider` | `">"` |  |