Navigation /

stable

Menu

Dropdown action menu dengan item, label, separator, shortcut, dan danger state.

import { Menu, MenuTrigger, MenuPanel, MenuItem } from "@naraya/ui";

Examples

Basic menu

<Menu>
  <MenuTrigger><Button>Open menu</Button></MenuTrigger>
  <MenuPanel>
    <MenuItem>Rename</MenuItem>
    <MenuItem shortcut="Ctrl+D">Download</MenuItem>
    <MenuSeparator />
    <MenuItem danger>Delete</MenuItem>
  </MenuPanel>
</Menu>

With label and placement

<Menu placement="top-end">...</Menu>

Props

Prop	Type	Default	Description
Menu.placement	`"bottom-start" \| "bottom-end" \| "top-start" \| "top-end"`	`"bottom-end"`	Posisi panel menu.
Menu.defaultOpen	`boolean`	`false`	State awal menu.
MenuTrigger.children*	`ReactElement`	—	Trigger tunggal yang akan di-clone.
MenuItem.icon	`ReactNode`	—	Ikon item.
MenuItem.shortcut	`string`	—	Hint shortcut.
MenuItem.danger	`boolean`	—	Style aksi destruktif.
MenuItem.disabled	`boolean`	—	Disable item.

Tokens Used

--bg-surface

Panel menu background

--border-subtle

Panel border

--shadow-lg

Elevasi overlay

--color-error

Danger item tone