Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Text Formatting Dropdown Dropdown Menu for React

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

One icon button holds Bold, Italic, Underline, Strikethrough, and Code. Each row prints a shortcut. The rows do not stay pressed, and the keys are not bound.

Use it when a narrow composer cannot fit a formatting toolbar. If bold should stay visibly on, a Toggle Group shows that state. In React, Base UI does not format the text or listen for the keys.

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

Anatomy

Dropdown Menu anatomy: trigger, label, item, shortcut, separator, sub trigger, content

Usage

<DropdownMenu>
  <DropdownMenuTrigger
    render={
      <Button aria-label="Text formatting" size="icon-md" variant="outline" />
    }
  >
    <TypeIcon aria-hidden="true" />
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-48">
    <DropdownMenuItem>
      <BoldIcon aria-hidden="true" />
      Bold
      <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <ItalicIcon aria-hidden="true" />
      Italic
      <DropdownMenuShortcut>⌘I</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <UnderlineIcon aria-hidden="true" />
      Underline
      <DropdownMenuShortcut>⌘U</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <StrikethroughIcon aria-hidden="true" />
      Strikethrough
      <DropdownMenuShortcut>⌘⇧X</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
{/* The rest of the file is under Installation. */}

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.

API Reference

Dropdown Menu

No extra props in this demo. The rest is on the Dropdown Menu page.

Button

Sets aria-label="Text formatting", size="icon-md" and variant="outline". The rest is on the Button page.

All 30 dropdown menu examples