Accessible navigation menu

A basic accessible nav is built from nav plus a list of links, not artificial div-buttons.

Code

<nav aria-label="Main navigation">
  <ul style="display:flex;gap:1.5rem;list-style:none;padding:0;margin:0">
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Preview

Explanation

aria-current="page" tells screen readers which link matches the current page. list-style:none removes bullets while keeping a semantic list for accessibility.

For the active menu item, prefer a CSS class .active synced with aria-current instead of an inline style.

Related tools

The <nav> tag

Purpose of <nav>: grouping a page's primary navigation links.

Breadcrumbs

Semantic breadcrumb markup with nav+ol and aria-label.