Live Docs

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

PropTypeDefaultDescription
Menu.placement"bottom-start" | "bottom-end" | "top-start" | "top-end""bottom-end"Posisi panel menu.
Menu.defaultOpenbooleanfalseState awal menu.
MenuTrigger.children*ReactElementTrigger tunggal yang akan di-clone.
MenuItem.iconReactNodeIkon item.
MenuItem.shortcutstringHint shortcut.
MenuItem.dangerbooleanStyle aksi destruktif.
MenuItem.disabledbooleanDisable item.

Tokens Used

--bg-surface

Panel menu background

--border-subtle

Panel border

--shadow-lg

Elevasi overlay

--color-error

Danger item tone

Accessibility

  • Trigger memakai aria-haspopup='menu' dan aria-expanded.
  • Panel menggunakan role='menu' dan item role='menuitem'.
  • Menu menutup saat klik di luar atau tekan Escape.