HTML navigation menu generator with submenus and aria-current

How to use the nav menu generator

1. In Label | URL per line (indent 2 spaces for a submenu), write each link, for example Blog | /blog.
2. Indent child links by two spaces under their parent.
3. Set the aria-label, such as “Main” or “Footer”.
4. Enter the Current page URL (gets aria-current) for the page this menu will appear on.
5. Optionally change the Class on <nav>, then copy the code.

What it does and when to use it

Almost every site has a main menu, and many have a footer menu, a sidebar of documentation links or a menu for an account area. All of them share the same accessible pattern: a nav landmark with a name, a list of links, nested lists for sub-pages, and a marker on the current page. The generator writes that pattern from a plain outline, so you can focus on the labels and URLs.

Pair it with the HTML5 Semantic Layout Generator, which places a menu inside the page header. For a single link with rel or target options, use the HTML Link Generator. To check every href on a finished page, the HTML Attribute Extractor lists them with their line numbers.

How it works

The lines are turned into nested lists with the same indentation rules as a list generator: every two spaces or one tab is one level, and a sub-list is placed inside its parent’s li. Each line is split at | into label and URL. A line without a URL gets href="#", which is useful for a parent that only opens a submenu, though a button is better for that in a finished menu. The link whose URL equals Current page URL gets aria-current="page". class and aria-label are left out when empty. Text and URLs are HTML-escaped, and the result is built in your browser.

Worked examples

A two-link menu on the About page:

<nav class="site-nav" aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about" aria-current="page">About</a></li>
  </ul>
</nav>

A submenu. In the sample, PDF and Images are indented under Tools, and the current page is /tools:

<li><a href="/tools" aria-current="page">Tools</a>
  <ul>
    <li><a href="/pdf">PDF</a></li>

A parent without a URL. Docs with Install | /docs/install indented below it, and empty class, label and current URL, gives <nav> with no attributes and <li><a href="#">Docs</a> containing the sub-list.

Limits and tips

• Generate the menu once per page, or set aria-current in your template, because the current page changes from page to page.
• Keep link labels short and unique; “More” twice in one menu is confusing.