Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Editor

Text Formatting Dropdown Dropdown Menu for React

A text formatting menu with bold, italic, underline, strikethrough and code, and the shortcut for each.

Framework
UI library

A full formatting toolbar is a lot of buttons for a narrow screen. This dropdown menu folds Bold, Italic, Underline, Strikethrough and Code behind one icon button, each with its shortcut so people learn the keys. It fits comment boxes, note apps and compact editors.

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

What formatting rows are in the menu?

Bold, Italic, Underline and Strikethrough, then a separator and Code. The menu is w-48.

Which shortcuts are shown?

⌘B, ⌘I, ⌘U, ⌘⇧X and ⌘E, each in a DropdownMenuShortcut. They only print the hint; your editor has to handle the keys.

What leads each label?

The matching bold, italic, underline, strikethrough or code icon, aria-hidden, so the label carries the meaning.

What does the trigger look like?

An outline Button with size="icon-md", a type icon and aria-label set to Text formatting.

How do I apply Bold when that row is chosen?

Run your editor's bold command where your library reports the choice. The menu closes first; send focus back to the text so the selection stays put. Set onClick on the Bold DropdownMenuItem.

Can a row show that Bold is already on?

Not in this demo: the rows are actions. To show the current state, make them checkbox rows that are checked when the selection is bold, as in the checkbox dropdown. Use DropdownMenuCheckboxItem with checked.

All 30 dropdown menu examples