Nav — RenDS Components

About

Overview

Nav is the global header. It tells the user where they are, what's available, and how to switch context. Make it sticky so it's reachable without scrolling, and keep it simple — primary destinations only, secondary stuff goes in account menus or settings.

Live

Demo

Below 48rem the links collapse behind the hamburger — narrow the window to try it.

<ren-nav>
  <nav class="ren-nav" aria-label="Primary">
    <a class="ren-nav-brand" href="/">Acme</a>
    <ul id="primary-links" class="ren-nav-links">
      <li><a class="ren-nav-link" href="/dashboard" aria-current="page">Dashboard</a></li>
      <li><a class="ren-nav-link" href="/reports">Reports</a></li>
    </ul>
    <div class="ren-nav-actions">…</div>
    <button class="ren-nav-toggle" type="button" aria-expanded="false"
            aria-controls="primary-links" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </button>
  </nav>
</ren-nav>

Reference

API

Class	Effect
`<ren-nav>`	The host. Owns the mobile toggle, Escape-to-close, outside-click and the `[popover]` dropdowns.
`.ren-nav`	The bar itself, on a real `<nav>` inside the host. Bottom border; add `.ren-nav-sticky` for the sticky blurred variant.
`.ren-nav-brand`	The logo / app name link. Always returns to home.
`.ren-nav-links` / `.ren-nav-link`	The list of primary links and each link in it. Collapses behind the toggle below 48rem.
`.ren-nav-actions`	Trailing slot for buttons / account menu.
`.ren-nav-toggle`	The hamburger, three `<span>` stripes that animate into a cross. Needs `aria-expanded` + `aria-controls`.

Inclusive by default

Accessibility

The bar is a real <nav aria-label="Primary"> inside <ren-nav>.
Mark the active link with aria-current="page" — .active is only a styling alias.
The hamburger carries aria-expanded and aria-controls pointing at the links list; the component flips the state and closes the menu on Esc, on outside click and when a link is followed.