Menu

Menus display a list of choices on temporary surfaces triggered by a button.

Installation

npm install @libretexts/davis-react

Basic Usage

import { Menu, IconButton } from '@libretexts/davis-react';

export default function Example() {
  return (
    <Menu>
      <Menu.Button as={IconButton} aria-label="Options">
        ⋮
      </Menu.Button>
      <Menu.Items>
        <Menu.Item>Edit</Menu.Item>
        <Menu.Item>Duplicate</Menu.Item>
        <Menu.Item>Delete</Menu.Item>
      </Menu.Items>
    </Menu>
  );
}

When to use

• Menu — Use for a list of actions triggered from a button (edit, delete, export). Menu items are actions, not data values. Selecting an item triggers a command.
• Select — Use when the user is choosing a data value from a list of options (country, status, category). The selected value is submitted as part of a form.