Dropdown

<div class="ui-dropdown">
  <button type="button" class="btn ui-dropdown__trigger"
    aria-haspopup="menu" aria-expanded="false">Actions</button>
  <!-- Menu typically portaled when open -->
  <div class="ui-dropdown__menu" role="menu">
    <button type="button" class="ui-dropdown__item" role="menuitem">Edit</button>
    <hr class="ui-dropdown__sep" role="separator" />
    <button type="button" class="ui-dropdown__item ui-dropdown__item--danger"
      role="menuitem">Delete</button>
  </div>
</div>

import {
  Dropdown, DropdownTrigger, DropdownMenu,
  DropdownItem, DropdownSeparator,
} from 'caustica-design/core'

<Dropdown>
  <DropdownTrigger className="btn">Actions</DropdownTrigger>
  <DropdownMenu>
    <DropdownItem>Edit packet</DropdownItem>
    <DropdownItem disabled>Archive</DropdownItem>
    <DropdownSeparator />
    <DropdownItem danger>Delete</DropdownItem>
  </DropdownMenu>
</Dropdown>