Open navigation menu

Accessible Navigation Menu

Creates a semantic navigation menu with proper ARIA attributes, keyboard navigation, current page indication, and responsive hamburger toggle.

HtmlForm Validation

Code

snippet
<nav aria-label="Primary navigation">
  <button class="menu-toggle"
          aria-expanded="false"
          aria-controls="main-menu"
          aria-label="Toggle navigation menu">
    <span class="hamburger"></span>
  </button>

  <ul id="main-menu" class="menu" role="menubar">
    <li role="none">
      <a href="/" role="menuitem" aria-current="page">Home</a>
    </li>
    <li role="none">
      <a href="/products" role="menuitem">Products</a>
    </li>
    <li role="none">
      <a href="/about" role="menuitem">About</a>
    </li>
    <li role="none">
      <a href="/blog" role="menuitem">Blog</a>
    </li>
    <li role="none">
      <a href="/contact" role="menuitem">Contact</a>
    </li>
  </ul>
</nav>

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li aria-current="page">Details</li>
  </ol>
</nav>

<style>
  .menu { list-style: none; display: flex; gap: 1rem; }
  .menu a { text-decoration: none; padding: 0.5rem 1rem; }
  .menu a[aria-current="page"] { font-weight: bold; border-bottom: 2px solid currentColor; }
  .breadcrumb { list-style: none; display: flex; gap: 0.5rem; }
  .breadcrumb li:not(:last-child)::after { content: " > "; }
</style>

Related Examples