Skip to content

Nav & Dropdown

Flexbox navigation with automatic link styling. Dropdown menus via <details> + <summary> — zero JavaScript required. fap.js adds close-on-click-outside.

Horizontal nav

<nav>
  <strong>Brand</strong>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#" aria-current="page">Docs</a></li>
    <li>
      <details>
        <summary>Dropdown</summary>
        <ul>
          <li><a href="#">Option A</a></li>
          <li><a href="#">Option B</a></li>
        </ul>
      </details>
    </li>
  </ul>
</nav>

End-aligned dropdown

Use data-align="end" to align the dropdown to the right edge.

<details data-align="end">
  <summary>Account</summary>
  <ul>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><hr></li>
    <li><button>Sign out</button></li>
  </ul>
</details>

Avatar summary (no dropdown arrow)

Use data-avatar on <summary> to hide the dropdown indicator.

<details data-align="end">
  <summary data-avatar>MK</summary>
  <ul>
    <li><a href="#">My Profile</a></li>
    <li><a href="#">Preferences</a></li>
  </ul>
</details>

Vertical nav

<nav data-vertical>
  <ul>
    <li><a href="#">Dashboard</a></li>
    <li><a href="#" aria-current="page">Users</a></li>
    <li><a href="#">Settings</a></li>
  </ul>
  <details>
    <summary>More</summary>
    <ul>
      <li><a href="#">Reports</a></li>
      <li><a href="#">Billing</a></li>
    </ul>
  </details>
</nav>