Dropdown

A menu of actions opened from a compact trigger.

#Import

import {
  Dropdown,
  DropdownContent,
  DropdownItem,
  DropdownToggle,
} from 'bmates-ui';

#Basic usage

The example below mirrors the primary Storybook composition and can be used as a starting point.

<Dropdown>
  <DropdownToggle>Actions</DropdownToggle>
  <DropdownContent>
    <DropdownItem>Edit</DropdownItem>
    <DropdownItem>Duplicate</DropdownItem>
  </DropdownContent>
</Dropdown>

#Preview

<Dropdown>
  <DropdownToggle>Actions</DropdownToggle>
  <DropdownContent>
    <DropdownItem>Edit</DropdownItem>
    <DropdownItem>Duplicate</DropdownItem>
  </DropdownContent>
</Dropdown>

#Prop previews

The examples below isolate the props that change visual output or interaction.

#Alignment

<Dropdown align="end">...</Dropdown>

#Trigger spacing

<Dropdown space={16}>...</Dropdown>

#Component API

#Usage notes

• Every component in the table is exported from bmates-ui.
• Unless noted otherwise, a component also accepts the standard props of its underlying HTML element.
• For application-owned state, use a controlled value and its change handler instead of only a default* prop.