navigation-menu

Horizontal nav with dropdown panels of links.

status: stable js: none support: baseline

Preview

Markup

<nav class="navigation-menu"><ul class="navigation-menu-list"><li class="navigation-menu-item"><button class="navigation-menu-trigger">Trigger</button><div class="navigation-menu-content"><ul class="navigation-menu-link-list"><li><a class="navigation-menu-link" href="#">…</a></li></ul></div></li></ul></nav>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/navigation-menu.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add navigation-menu

Accessibility

Reveals on :hover/:focus-within — pure CSS, no JS trigger; nav landmark + aria-current=page

Classes

.navigation-menu .navigation-menu-list .navigation-menu-item .navigation-menu-trigger .navigation-menu-content .navigation-menu-link-list .navigation-menu-link .navigation-menu-link-icon .navigation-menu-link-title .navigation-menu-link-description

Dependencies

base/tokens