# Navbar

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

A responsive top bar that works on mobile and desktop with no JavaScript.

Wrap a `nav` in `<header class="navbar">`. The first list holds the brand. The list with `popover` holds the links, and the `.nav-toggle` button opens it on small screens.

```html
<header class="navbar">
  <nav class="container-fluid" aria-label="Example">
    <ul>
      <li><a href="#"><img src="/favicon.svg" alt=""> Brand</a></li>
    </ul>
    <button class="nav-toggle" popovertarget="menu-basic" aria-label="Menu"></button>
    <ul id="menu-basic" popover>
      <li><a href="#" aria-current="page">Docs</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><button class="primary">Sign in</button></li>
    </ul>
  </nav>
</header>
```

## Mobile and desktop

The navbar measures its own `nav`, not the screen. When the nav is narrower than 48rem, the links hide behind the menu button and open as a full width panel under the bar. That is why the example above shows the menu button here: the preview is narrower than 48rem. Resize the window to see both layouts on this site's own navbar.

Tapping outside the panel or pressing `Esc` closes it. A link to another page closes it by loading that page. A link to a section of the same page leaves it open, so close it in its click handler with `menu.hidePopover()`.

## Sticky

`.sticky` keeps the bar at the top of the screen while the page scrolls, the way this site's navbar works. On phones with a notch the bar also fills the area under the status bar.

```html
<header class="navbar sticky">...</header>
```

## Colors

A color class fills the bar. Links switch to the bar's text color.

```html
<header class="navbar primary">
  <nav class="container-fluid" aria-label="Primary example">
    <ul>
      <li><a href="#">Brand</a></li>
    </ul>
    <button class="nav-toggle" popovertarget="menu-primary" aria-label="Menu"></button>
    <ul id="menu-primary" popover>
      <li><a href="#" aria-current="page">Docs</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>
<header class="navbar contrast">
  <nav class="container-fluid" aria-label="Contrast example">
    <ul>
      <li><a href="#">Brand</a></li>
    </ul>
    <button class="nav-toggle" popovertarget="menu-contrast" aria-label="Menu"></button>
    <ul id="menu-contrast" popover>
      <li><a href="#" aria-current="page">Docs</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>
```

## Current page and icon buttons

`aria-current="page"` marks the link of the page you are on. A button with `aria-label` and no class, such as a theme toggle, is drawn as a plain icon.

```html
<header class="navbar">
  <nav class="container-fluid" aria-label="Icon example">
    <ul>
      <li><a href="#">Brand</a></li>
    </ul>
    <ul>
      <li><a href="#" aria-current="page">Docs</a></li>
      <li>
        <button type="button" aria-label="Toggle dark mode">
          <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/></svg>
        </button>
      </li>
    </ul>
  </nav>
</header>
```

## Variables

| Variable | Default |
| --- | --- |
| `--i-navbar-height` | `4rem` |
| `--i-navbar-brand-font-size` | `1.25rem` |
| `--i-navbar-brand-image-height` | `2rem` |
| `--i-navbar-color-background` | `var(--i-color-background)` |
| `--i-navbar-color-border` | `var(--i-color-subtle-border)` |
| `--i-navbar-z-index` | `90` |