menubar

Horizontal menu bar with dropdown submenus.

status: stable js: trigger support: popover-api

Preview

This overlay stays hidden until triggered — open it in the live demo →

Markup

<div class="menubar" role="menubar"><div class="menubar-menu-item"><button class="menubar-trigger" popovertarget="X" aria-haspopup="menu">File</button><div class="menubar-menu" popover id="X" role="menu">…</div></div></div>

Install

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

@import "@russfranky/shadcss/src/components/menubar.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add menubar

Accessibility

Opens via popovertarget. For arrow-key roving focus + menubar roles add @russfranky/shadcss-js/menu and data-sc-menu

Classes

.menubar .menubar-trigger .menubar-menu

Dependencies

base/tokens dropdown