Components
Overview
AlertApp SidebarAssistant PanelAvatarBadgeBreadcrumbButtonButton GroupCalendarCheckboxChipComboboxData TableDate PickerDividerDropdown MenuFABField / Field SetFormIcon ButtonIconsInputInput GroupItem / Item SetKeyboardLink ButtonLogoNavbarNotificationPage HeadingPopoverRadioScanner FieldSection HeadingSelectSheetSidebarText AreaTime PickerToggle ButtonTokensToolbarTooltip

Dropdown Menu

Stacked menu items. option / groupName / divider types; leading icons and avatars.

View in Figma
<DropdownMenu>
  <DropdownMenuItem label="First option" />
  <DropdownMenuItem label="Second option" />
  <DropdownMenuItem label="Third option" />
</DropdownMenu>
<DropdownMenu>
  <DropdownMenuItem
    label="Edit"
    leadingIcon={faPencil}
  />
  <DropdownMenuItem
    label="Download"
    leadingIcon={faDownload}
  />
  <DropdownMenuItem
    label="Delete"
    leadingIcon={faTrashCan}
  />
</DropdownMenu>
<DropdownMenu>
  <DropdownMenuItem
    label="Ashley Green"
    leadingAvatar={{ initials: "AG" }}
  />
  <DropdownMenuItem
    label="Ollie Brooks"
    leadingAvatar={{ initials: "OB" }}
  />
  <DropdownMenuItem
    label="Mitch Galehouse"
    leadingAvatar={{ initials: "MG" }}
  />
</DropdownMenu>
Main building
South building
<DropdownMenu>
  <DropdownMenuItem
    type="groupName"
    groupName="Main building"
  />
  <DropdownMenuItem label="Lobby" text="⌘1" />
  <DropdownMenuItem
    label="Conference A"
    text="⌘2"
  />
  <DropdownMenuItem type="divider" />
  <DropdownMenuItem
    type="groupName"
    groupName="South building"
  />
  <DropdownMenuItem label="Warehouse" text="⌘3" />
  <DropdownMenuItem
    label="Loading dock"
    text="⌘4"
  />
</DropdownMenu>
<DropdownMenu>
  <DropdownMenuItem label="Available" />
  <DropdownMenuItem
    label="Coming soon"
    disabled
  />
</DropdownMenu>
<InputGroup
  placeholder="Type to filter"
  leadingIcon={faMagnifyingGlass}
  menu={
    <DropdownMenu>
      <DropdownMenuItem label="Lobby" />
      <DropdownMenuItem
        label="Conference Room A"
      />
    </DropdownMenu>
  }
/>
Props
type:"option" | "groupName" | "divider"= "option"
option = interactive; groupName = section heading; divider = horizontal rule.
label:ReactNode
Primary label for option type.
groupName:ReactNode
Heading text for groupName type.
text:ReactNode
Trailing text (e.g. keyboard shortcut).
leadingIcon:IconDefinition
Optional icon left of the label.
leadingAvatar:{ initials?, src?, alt? }
Optional avatar left of the label.
disabled:boolean= false
Non-interactive, muted option.
Tokens
Engineer workflow → docs/kits.md