Dropdown Menu
Stacked menu items. option / groupName / divider types; leading icons and avatars.
<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>
}
/>type:"option" | "groupName" | "divider"= "option"option = interactive; groupName = section heading; divider = horizontal rule.
label:ReactNodePrimary label for option type.
groupName:ReactNodeHeading text for groupName type.
text:ReactNodeTrailing text (e.g. keyboard shortcut).
leadingIcon:IconDefinitionOptional icon left of the label.
leadingAvatar:{ initials?, src?, alt? }Optional avatar left of the label.
disabled:boolean= falseNon-interactive, muted option.