Navigation Menu

c2-navigation-menu

Site navigation bar: a row of c2-navigation-menu-item children, each either a plain link or a trigger that opens a panel of c2-navigation-menu-link rows (or any markup) below the bar. The panels are native popovers on the top layer positioned by c2-overlay, so they are never clipped by the header and light-dismiss on Escape or an outside click.

The bar owns which panel is open: value is the value of that item ('' when closed), and value-change fires on every change. Panels open on hover after open-delay and close after close-delay once the pointer leaves both the item and its panel; a click on a trigger opens its panel straight away, and a click on the open trigger closes it (hover then leaves that item shut until the pointer moves on). Set open-on="click" for a bar that ignores hover entirely.

Keyboard: every item is a tab stop. On a trigger, ArrowLeft / ArrowRight and Home / End move along the bar (moving while a panel is open switches to that item's panel), ArrowDown, Enter or Space opens the panel and moves focus to its first link, and Escape closes it and returns focus to the trigger. Tab from an open trigger walks into the panel, since the popover sits right after the trigger in the DOM.

The bar never wraps: it is one row, and mode="mobile" is the other layout. In mobile mode the bar becomes a single button — the mobile-trigger slot replaces it — that opens the whole navigation as one hierarchy: every plain link is a row, and every item with a panel becomes a heading with its panel's rows underneath. Add collapsible and those groups open one at a time instead, the open one being value, exactly as in the bar, and the list starts on the group holding the current page. Set mobile-breakpoint and the bar switches modes on its own below that viewport width; leave it unset and mode is yours to set, from a media query of your own or from anything else that knows better.

Add auto-current to derive the current link from the browser URL. Exact hash links win, a hashless page link is the fallback, and on a page made only of hash links the first row is the default. The menu follows hashchange and popstate; SPA routers can set current-url or call syncCurrent(url) after navigation. Without auto-current, authored current attributes remain fully controlled by the application.

c2-navigation-menu-item

One entry of a c2-navigation-menu. With an href and nothing in the panel slot it is a plain link; with content in panel it becomes a trigger that opens that content below the bar, and the chevron and aria-expanded are added for you. Mark the entry of the current page current to announce aria-current="page" and show the indicator line.

A trigger follows its own panel: while one of the panel's rows is the current page — a current c2-navigation-menu-link, or any element carrying aria-current — the item marks itself current-group and wears the same styling as a current item, so the bar keeps showing which section the visitor is in while the panel is closed. Only the row keeps aria-current: the trigger is the group, not the page.

The bar owns the open state: it sets expanded, hands the item the element its panel is anchored to, and handles hover intent, the keyboard and dismissal. The panel itself is a c2-overlay popover, so it escapes any overflow: hidden header, but a manual one: a bar that opens panels on hover cannot leave dismissal to the browser, whose light dismiss then disagrees between engines about a press on the trigger of an open panel.

In the bar's mobile mode the item renders flat instead: a plain link stays a row, and a trigger becomes a heading with its panel's rows listed underneath it, so the whole navigation reads as one hierarchy. With the bar's collapsible set, that heading is a button that opens and closes its group.

c2-navigation-menu-link

A link row for the panel slot of a c2-navigation-menu-item: a title, an optional second line of description, and optional icons. It renders a real <a>, so it is a tab stop, opens in a new tab with a modifier and reports aria-current="page" when marked current. Lay several of them out with your own CSS grid to build a mega panel.