Dropdown menu

A dropdown menu displays a list of actions or options to a user.

#Default

Use a dropdown menu to group actions behind one trigger.

import { ButtonItem, DropdownMenu, MenuGroup } from '@wolf-rayet/react';

<DropdownMenu trigger="Page actions">
  <MenuGroup>
    <ButtonItem>Edit</ButtonItem>
    <ButtonItem>Share</ButtonItem>
    <ButtonItem>Move</ButtonItem>
    <ButtonItem>Clone</ButtonItem>
    <ButtonItem>Delete</ButtonItem>
  </MenuGroup>
</DropdownMenu>

#Sections

Use sections to separate groups of related actions.

import { ButtonItem, DropdownMenu, MenuGroup, Section } from '@wolf-rayet/react';

<DropdownMenu trigger="Conversation">
  <MenuGroup>
    <Section title="Assign">
      <ButtonItem>Assign to me</ButtonItem>
      <ButtonItem>Assign to a teammate</ButtonItem>
    </Section>
    <Section title="Status">
      <ButtonItem>Mark as resolved</ButtonItem>
      <ButtonItem isDisabled>Reopen</ButtonItem>
    </Section>
  </MenuGroup>
</DropdownMenu>

#Descriptions

Add a description when the label alone is not enough.

import { ButtonItem, DropdownMenu, MenuGroup } from '@wolf-rayet/react';

<DropdownMenu trigger="Route to">
  <MenuGroup>
    <ButtonItem description="Answers in under a minute">Support bot</ButtonItem>
    <ButtonItem description="7 reps on shift">Human queue</ButtonItem>
  </MenuGroup>
</DropdownMenu>

#Selected

Show which option is currently chosen.

import { ButtonItem, DropdownMenu, MenuGroup } from '@wolf-rayet/react';

<DropdownMenu trigger="Default queue">
  <MenuGroup>
    <ButtonItem isSelected={queue === 'billing'} onClick={() => setQueue('billing')}>Billing</ButtonItem>
    <ButtonItem isSelected={queue === 'tech'} onClick={() => setQueue('tech')}>Technical support</ButtonItem>
    <ButtonItem isSelected={queue === 'onboarding'} onClick={() => setQueue('onboarding')}>Onboarding</ButtonItem>
  </MenuGroup>
</DropdownMenu>

#Links

Use a link item when the action takes people somewhere.

import { DropdownMenu, LinkItem, MenuGroup } from '@wolf-rayet/react';

<DropdownMenu trigger="Help" placement="bottom-end">
  <MenuGroup>
    <LinkItem href="#">Documentation</LinkItem>
    <LinkItem href="#">Contact support</LinkItem>
  </MenuGroup>
</DropdownMenu>