Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Editor

Alignment Options Dropdown Menu for React

A text alignment picker with Left, Center, Right and Justify, whose icon button shows the current choice.

Framework
UI library

Alignment reads best as an icon: the button shows the current direction at a glance. This dropdown menu holds Align Left, Align Center, Align Right and Justify as radio items, and the outline icon button swaps to the chosen alignment's icon. It fits rich text editors, email composers and slide tools.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does the alignment choice work?

Left starts selected. The values are left, center, right and justify, in one radio group, so picking one unchecks the others. DropdownMenuRadioGroup takes value, and onValueChange receives the new value. Each DropdownMenuRadioItem has its value.

Why does the trigger icon change?

The button renders the left, center, right or justify icon depending on the current value, so it always shows the active alignment. Each row repeats the same icon before its label.

Why is Justify under a line?

A DropdownMenuSeparator sits inside the radio group, between Align Right and Justify, to set the full-width option apart. It doesn't split the group: Justify still unchecks the others.

How wide is the menu?

The menu is w-48. The trigger is an outline Button with size="icon-md" and aria-label set to Text alignment, since it has no visible text.

Can I change alignment from the keyboard?

Yes. Enter, Space or Arrow Down on the button opens the menu, Arrow Up and Arrow Down move between rows, Enter picks one, and Escape closes the menu and returns focus to the button.

Can Left and Center both be on?

No. The group holds a single value, and the check follows the row that matches it. Use checkbox items for options that can be on together, such as bold and italic.

All 30 dropdown menu examples