title: "Menu" slug: "/packages/menu" category: "control" componentNames:

• "Menu"
• "MenuItem"
• "MenuPanel"
• "MenuDisclosure"

Menu

Accessible Menu component that follows the WAI-ARIA Menu or Menu bar Pattern. It also includes a MenuDisclosure component that follows the WAI-ARIA Menu Button Pattern.

import { Menu, MenuItem, MenuDisclosure, MenuPanel } from "@ds-kit/menu"
import Button from "@ds-kit/button"

Basic Example

A basic example of an Menu component can look like this:

<Menu>
  <MenuDisclosure as={Button} variant="primary">
    {"Select something"}
  </MenuDisclosure>
  <MenuPanel>
    <MenuItem>{"Item One"}</MenuItem>
    <MenuItem>{"Item Two"}</MenuItem>
    <MenuItem>{"Item Three"}</MenuItem>
    <MenuItem>{"Item Four"}</MenuItem>
  </MenuPanel>
</Menu>