Menu
A short list of actions that opens from a button.
SourcePackage @kerf-js/veneer
Preview
tsx
import { Menu } from '@kerf-js/veneer'export function Basic() { return ( <Menu label="Actions" items={[ { label: 'Rename', icon: 'pencil', shortcut: '⌘R' }, { label: 'Duplicate', icon: 'copy', shortcut: '⌘D', }, { separator: true }, { label: 'Delete', icon: 'trash', tone: 'critical', }, ]} /> )}Installation
npm install @kerf-js/veneerUsage
tsx
import { Menu } from '@kerf-js/veneer'Placement
Use side to pick where it opens.
tsx
import { Menu } from '@kerf-js/veneer'export function Placement() { return ( <> {(['top', 'bottom', 'left', 'right'] as const).map( (side) => ( <Menu key={side} label={side} side={side} trigger={{ emphasis: 'outline', tone: 'neutral', }} items={[ { label: 'Rename' }, { label: 'Duplicate' }, { label: 'Archive' }, ]} /> ), )} </> )}Alignment
Use align to line it up with the button.
tsx
import { Menu } from '@kerf-js/veneer'export function Alignment() { return ( <> {(['start', 'center', 'end'] as const).map( (align) => ( <Menu key={align} label={align} align={align} trigger={{ emphasis: 'outline', tone: 'neutral', }} items={[ { label: 'Rename' }, { label: 'Duplicate' }, { label: 'Archive' }, ]} /> ), )} </> )}Groups
A group entry names what follows.
tsx
import { Menu } from '@kerf-js/veneer'export function Groups() { return ( <Menu label="Deploy to" items={[ { group: 'Production' }, { label: 'eu-west' }, { label: 'us-east' }, { group: 'Preview' }, { label: 'staging' }, ]} /> )}Trigger styles
trigger takes any Button prop.
tsx
import { Menu } from '@kerf-js/veneer'export function Trigger() { return ( <> <Menu label="Sort" trigger={{ emphasis: 'ghost', tone: 'neutral' }} items={[{ label: 'Newest' }, { label: 'Oldest' }]} /> <Menu label="Export" trigger={{ emphasis: 'soft' }} items={[{ label: 'CSV' }, { label: 'JSON' }]} /> <Menu label="More" trigger={{ emphasis: 'outline', tone: 'neutral', size: 'sm', }} items={[{ label: 'Archive' }]} /> </> )}A row's actions
Use items to list a row's actions, and trigger to make the button quiet enough to sit in a row.
tsx
import { Menu, Row, Stack, Text } from '@kerf-js/veneer'export function RowActions() { return ( <Row justify="between" gap="group" > <Stack gap="hair"> <Text role="heading">checkout</Text> <Text subtle>Live in eu-west</Text> </Stack> <Menu label="Manage" align="end" trigger={{ emphasis: 'ghost', tone: 'neutral', size: 'sm', }} items={[ { label: 'Open logs', icon: 'external' }, { label: 'Redeploy', icon: 'rocket' }, { separator: true }, { label: 'Pause', tone: 'critical' }, ]} /> </Row> )}When to use
Use it for
- Several actions on one thing, and not much room
Reach for something else
- Select, when people are choosing a value
- CommandPalette, when there are hundreds of commands
Accessibility
- Enter
- Opens, or picks the highlighted item
- ↑↓
- Moves through the items
- HomeEnd
- Jumps to the first or last
- Esc
- Closes and returns focus
- Aletter
- Jumps to the next item starting with it
Theming
Restyle it app-wide from veneer() in your kerf config. Every key takes colour, spacing, size, radius, shadow, type and motion; its own keys are listed. A state nests inside: hover: { bg: 'ink' }. Text on a fill you set is contrast-checked at build. How theming works
| Key | Own keys | States |
|---|---|---|
parts.popover | — | none |
ts
veneer({ colors: { brand: '#e8590c', ink: '#1b1b1f' }, parts: { popover: { radius: 12, shadow: 'lg' }, },})API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
label | unknown | — | The trigger's text. |
items | MenuEntry[] | — | The entries: an action, { separator: true } or { group }. |
trigger | ButtonProps | — | Button props for the trigger. |
side | Side | 'bottom' | Which side it opens on. |
align | Align | 'start' | How it lines up with the trigger. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="menu"] [data-part="content"]
contentshuttleseparatorgroup-labelitem
RelatedButtonPopoverCommand palette