Dropdown menu

Action menu with menu semantics and keyboard navigation.

Install

npx raster add dropdown-menu

Markup

<div class="rs-menu" role="menu"><button class="rs-menu-item" role="menuitem">Rename</button><button class="rs-menu-item" role="menuitem">Duplicate</button><hr class="rs-menu-sep" /><button class="rs-menu-item" role="menuitem">Delete</button></div>

React

import { DropdownMenu } from "@/components/raster/dropdown-menu";

<DropdownMenu
  label="Actions"
  items={[
    { label: "Rename", onSelect: rename },
    { label: "Duplicate", onSelect: duplicate },
    { separator: true },
    { label: "Delete", onSelect: remove },
  ]}
/>

Classes

.rs-menu.rs-menu-item.rs-menu-sep

Depends on

/select /button