edible-nav-dropdown

A grouped navigation item with an accessible hover and keyboard dropdown. Place it alongside <li> items inside a <nav><ul>. Child <a> (or <button>) elements become the dropdown items.

Opens on hover or ArrowDown on the trigger. Navigate items with ↑ / ↓, Home, End. Close with Escape or by moving focus away.

Basic

A single grouped item inside a navigation bar.

Multiple dropdowns

Opening one dropdown automatically closes any other that is open on the same page.

With buttons as items

Child elements can be <button> elements instead of links, for actions rather than navigation.

Click an item above to see which was selected.

Disabled

The disabled attribute disables the trigger button and makes all child links unreachable.

Inside a full-width site header

Typical use: a sticky top bar with mixed plain links and grouped dropdowns.