Menu

Install

The menu is part of the boilerplate skill, with every other component on this site. Install it in your project's folder; it works in Claude Code, Codex, Cursor and other agents. Already done? Skip ahead. More in the Introduction.

npx skills add frontendsupply/skills --skill boilerplate

Ask

Then ask for it in your own words, or run the command. The skill reads your project's style first and writes the component in it. If the project has no menu yet:

/boilerplate add menu

If it already has one, the skill rebuilds it on this pattern and keeps its look, its names and every place that uses it working:

/boilerplate refactor menu

Either way it ends by proving that only the look changed: a script checks every behavior class and slot is still there.

Stacked submenus

A submenu opens over its parent instead of beside it, with its header landing exactly on the row that opened it, so the row seems to turn into the title of the next level. The parents stay behind, dimmed, as a trail of where you came from. There's no depth limit, and nothing ever runs off the side of the screen. The header, ← and Escape go back one level; clicking a dimmed parent goes back to it.

Checkbox and radio items

Rows that hold state, a toggle or one choice out of several, show a check at their end. Picking one keeps the menu open, so you can change several at once.

Long lists

A panel taller than the room it has scrolls, and a submenu's header stays pinned while it does, so the way back is always in reach. The panels behind hold still while a child is open. Rows never wrap: a long name widens the panel instead of spilling into the next row. Near the bottom of the screen a submenu shifts up rather than shrinking to a sliver.

Composition

The trigger has no look of its own: it becomes whatever button you render it into, from a plain button to a sidebar row. The menu can match the trigger's width, as a workspace switcher does.

Shortcuts

Give a row's shortcut its keys and pressing them runs the row, whether the menu is open or not. The hint is written for the platform, ⌥ P on a Mac and Alt + P elsewhere, and hidden on touch screens. While a dialog is open, the shortcuts of the page behind it stay quiet. Try it on Plate I above. The keys are handled by KeyUX.

Context menu and menubar

The skill also includes a context menu, opened by a right click or a long press, and a menubar, a row of menus as in a desktop app. Both are built from the same rows as the menu, so shortcuts, checkbox and radio items and stacked submenus work in them unchanged. For how they behave, see Base UI's Context Menu and Menubar.

Alignment

An open menu at its real size, with the lines its rows share. Hover a line to see what sits on it: icons centered in each row's first square, with the group label in line with them; labels starting where that square ends; shortcuts, chevrons and checks ending on one edge; and every row centered on its middle, stacked the same inset from the panel's edge, dashed. That inset is what seats a submenu's header on the row that opened it. A part a pixel off would show as a line of its own.