hp-navigation-menu

Top-nav pattern with optional hover-revealed submenus. Slotted <hp-nav-item> children are plain links when they have no content slot, or dropdown triggers when they do. Arrow keys move between top-level triggers. Single-open-at-a-time semantics.

Examples

API

Intent

Changelog

About

Components

Buttons Inputs Overlays

Resources

Docs Changelog GitHub

Contact

<body> <hp-navigation-menu> <hp-nav-item href="/about">About</hp-nav-item> <hp-nav-item> Components <div slot="content"> <a href="/buttons">Buttons</a> <a href="/inputs">Inputs</a> </div> </hp-nav-item> <hp-nav-item href="/contact">Contact</hp-nav-item> </hp-navigation-menu> </body>

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Slots

Slot	Description
`(default)`	hp-nav-item children

Accessibility

Bar role="menubar"; items role="menuitem". ArrowLeft / Right move focus between siblings; Home / End jump. Plain-link items follow their href on click or Enter; submenu items toggle their panel.

No per-component entries in CHANGELOG.md yet.

Install

Slots

Accessibility

Contents