A dropdown list of choices that appears on top of app content when triggered. Menu is
split into two components: Menu (the shell — open state and
floating panel positioning) and MenuItem (a single interactive
row inside it).
Menu owns exactly two things: open/close state (bits-ui's DropdownMenu.Root) and the floating panel's position. It has
no opinion about what goes inside — pass MenuItem components, a Divider, group headings, or any custom element
as children.
Use the trigger snippet to supply a fully custom trigger
element (e.g. an icon button). When omitted, a default filled Button labelled by label is rendered.
A separate ContextMenu component exists for the right-click variant,
which stays data-driven since its items are always contextual and uniform.
import { Menu, MenuItem } from '@noxlovette/material'; See it live, with Controls, in Storybook rather than a hand-rolled preview here.
Playground
Open the Menu story, plus With Custom Trigger and With Selected Item variants.
<script lang="ts">
import { Menu, MenuItem } from '@noxlovette/material';
</script>
<Menu label="Options" align="end">
<MenuItem iconProps={{ name: 'edit' }} onclick={() => console.log('edit')}>
Edit
</MenuItem>
<MenuItem iconProps={{ name: 'delete' }} onclick={() => console.log('delete')}>
Delete
</MenuItem>
</Menu> Keyboard navigation
Arrow keys move through items, Enter/Space activates, Escape closes and returns focus to the trigger — all handled by bits-ui DropdownMenu primitives.
Selected indicator
selected items show a check icon in addition to a colored background, avoiding a color-only signal.
Disabled items
Individual items can be disabled and are skipped during keyboard navigation.