← Overview

dropdownNav

Multi-level dropdown and mega-menu navigation on the ARIA disclosure pattern — a plain nested list of links without JavaScript.

The markup is a nested list of links. Everything the module adds is one <button aria-expanded aria-controls> per submenu — the ARIA disclosure navigation pattern. Disable JavaScript and reload: the navigation is still complete, just fully unfolded.

▸ This viewport is at or above the navigation breakpoint (--bp-navigation, 1250px): the navs below render as a bar with floating panels.

▾ This viewport is below the navigation breakpoint (--bp-navigation, 1250px): the navs below render as a stacked list whose submenus collapse like an accordion. Widen the window past 1250px to see the dropdown layout.

Click to open (default)

“Products” and “Company” have their own landing pages, so their links stay links and a separate chevron button opens the submenu. “Software” is only a grouping label, so the button wraps the label itself. Try Tab, Esc and ↓.

Acme

Hover to open (data-dropdownnav-hover)

The same component with hover opening enabled. It only applies to fine pointers — a touch device keeps the tap-to-open behaviour, so nobody gets a menu they cannot leave. Hovering drives the very same aria-expanded state, and clicking, Esc and Tab keep working exactly as above.

Acme

Stacked layout (below the breakpoint)

Which layout applies is decided by a viewport media query, so a narrow box on this page cannot show it — only a narrow viewport can. The frame below has one of its own. Same markup, same module, same aria-expanded: only the stylesheet changes its mind, and the submenus behave like an accordion in the flow instead of floating over the page.

Without JavaScript (the base layer)

This nav carries no data-js-behavior, so the module never touches it — exactly what every visitor sees with JavaScript off, and what everyone sees for the moment before the chunk has loaded. It is a nested list of links: nothing hidden, no chevron that would do nothing when clicked, no ARIA promising behaviour that is not there. The stylesheet only starts collapsing panels once the script has set data-dropdownnav-ready, so “collapsed” and “can be expanded again” always arrive together.

Acme