Dropdown Menu

A dropdown menu keeps actions and options behind a trigger and shows them when users open it. Users move through the items with the pointer or the arrow keys, and the menu closes when they choose an item, press Escape or press outside of it. Checkbox and radio items keep the menu open, so users can change several options in a row. The trigger has no styles of its own, so the examples render it as a Button, and the content is as wide as its trigger but at least 8rem. A label names a group for assistive technology and therefore only works inside a DropdownMenuGroup or a DropdownMenuRadioGroup.

UsageCopy Anchor Link

import { Button } from "@biem/ui/components/ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuTrigger,
} from "@biem/ui/components/ui/dropdown-menu";

export function DropdownMenuDefault() {
	return (
		<DropdownMenu>
			<DropdownMenuTrigger render={<Button variant="outline"/>}>Transfer</DropdownMenuTrigger>
			<DropdownMenuContent>
				<DropdownMenuItem>Add cases</DropdownMenuItem>
				<DropdownMenuItem>Duplicate</DropdownMenuItem>
				<DropdownMenuItem>Print labels</DropdownMenuItem>
			</DropdownMenuContent>
		</DropdownMenu>
	);
}

ExamplesCopy Anchor Link

With LabelCopy Anchor Link

Actions in a menu often refer to one particular object, such as a single order or a store. A label names the group of items that belong to it, and assistive technology announces that name with the items, so users know what their choice will affect.

With SeparatorCopy Anchor Link

When a menu mixes actions of different kinds, such as editing an order and passing it on to another team, users scan it faster if related actions stay together. Separators divide the items into such groups, and assistive technology recognizes each one as a division, so the structure holds for every user.

With IconCopy Anchor Link

In menus that users open many times a day, an icon lets them recognize a familiar action before they read its name. The text still names the outcome, so every action remains clear where an icon alone would leave room for doubt.

With ShortcutCopy Anchor Link

Frequent actions are faster on the keyboard than through a menu. Shown with an item, a shortcut teaches users its key combination every time they open the menu. On its own, the hint triggers nothing, so the application provides the key binding itself.

With Checkbox ItemsCopy Anchor Link

Some settings consist of independent options, such as the figures a report includes. Checkbox items let users turn each option on or off, and the menu stays open after every change, so they adjust several options in a row. Through defaultChecked an item starts checked and then keeps its state on its own.

With Radio GroupCopy Anchor Link

A choice can also be exclusive, such as the order in which a list is sorted. In a radio group, users select exactly one item, and the menu stays open so they see the new selection at once. With defaultValue, the group begins with one item selected.

With SubmenuCopy Anchor Link

Actions that come in several variants would crowd the first level of a menu. A submenu gathers the variants behind one item, which users open by resting the pointer on it or with the keyboard. Escape then closes only the submenu, so users return to the first level without starting over.

DestructiveCopy Anchor Link

Cancelling an order or removing a store from a region often cannot be undone. Set to "destructive", variant marks such an item, so users recognize the consequence before they choose it and can still decide against it.

InsetCopy Anchor Link

Once some items in a menu start with an icon, the text of the others no longer lines up with theirs. Through inset, an item or a label is indented to the same starting point, so users read every entry along one straight edge.

Item as LinkCopy Anchor Link

Navigation menus lead users to other pages instead of acting on the current one. With render, an item becomes a real link, so the browser handles the address and users can open the page in a new tab as well.

Top SideCopy Anchor Link

Near the lower edge of a screen, such as in a toolbar below a table, a menu finds more room above its trigger. Once side is set to "top", the content opens there, and it moves to the opposite side when space runs short.

Right SideCopy Anchor Link

A trigger in a narrow sidebar has more room beside it than below it. The content opens toward that room when side is set to "right", and it falls back to the left when the screen lacks the space.

Bottom SideCopy Anchor Link

In most places, users expect a menu to open below its trigger, in the direction they read. This is the default, and side set to "bottom" states it explicitly; where the space below runs short, the content opens above instead.

Left SideCopy Anchor Link

Row actions at the end of a table sit close to the right edge of the screen. Set to "left", side opens the content toward the table, and the content changes to the right side only when too little space remains on the left.

Open on HoverCopy Anchor Link

In a navigation bar, users move across several menus and expect each one to open as soon as the pointer rests on it. Through openOnHover, the trigger responds after a short pause of the pointer, while a press still works. A menu opened this way is never modal, so the rest of the page stays usable.

ControlledCopy Anchor Link

Certain workflows open a menu from elsewhere in the interface, such as a key that brings up the actions of the selected row. With open and onOpenChange, the application holds the open state, so the menu opens and closes whenever the workflow requires it, not only through its trigger.

Controlled Checkbox ItemsCopy Anchor Link

When the options in a menu shape the screen around it, such as the filters of a list, the application needs every change at once. Through checked and onCheckedChange it holds the state of each item, so the list follows every change and the choice can be saved for the next visit.

Controlled Radio GroupCopy Anchor Link

A selection can also come from outside the menu, such as a sort order that users saved on their last visit. By holding the selected item through value and onValueChange, the application restores that choice and lets the rest of the screen react to every new one.

DisabledCopy Anchor Link

While data is still loading, or when users lack the permission for these actions, the menu offers nothing they can use. Set on the menu itself, disabled prevents users from opening it and turns off the trigger as well as every item.

Disabled ItemCopy Anchor Link

A single action can be unavailable while the others remain useful, such as approving an order that still lacks a quantity. Marked as disabled, the item no longer reacts to a press, yet the arrow keys still reach it, so keyboard users learn that the action exists.

Disabled Radio GroupCopy Anchor Link

Once an order has shipped, the options chosen for it are settled. With disabled on the radio group, users still see the current selection but can no longer change it, and the arrow keys still move through its items.

API ReferenceCopy Anchor Link

DropdownMenuCopy Anchor Link

DropdownMenuTriggerCopy Anchor Link

DropdownMenuPortalCopy Anchor Link

DropdownMenuContentCopy Anchor Link

DropdownMenuGroupCopy Anchor Link

DropdownMenuLabelCopy Anchor Link

DropdownMenuItemCopy Anchor Link

DropdownMenuCheckboxItemCopy Anchor Link

DropdownMenuRadioGroupCopy Anchor Link

DropdownMenuRadioItemCopy Anchor Link

DropdownMenuSubCopy Anchor Link

DropdownMenuSubTriggerCopy Anchor Link

DropdownMenuSubContentCopy Anchor Link

DropdownMenuSeparatorCopy Anchor Link

DropdownMenuShortcutCopy Anchor Link

DropdownMenuShortcut shows the keyboard shortcut of an item at the end of its row and doesn't handle the key press itself. It renders a span and has no props of its own.