@ds-kit/menu

Menu component

Usage no npm install needed!

<script type="module">
  import dsKitMenu from 'https://cdn.skypack.dev/@ds-kit/menu';
</script>

README

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>