shadcn.io is an independent project built on shadcn/ui
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 Svelte, Ark UI does not format the text or listen for the keys.
Installation
Anatomy
Usage
<DropdownMenu><DropdownMenuTrigger>{#snippet asChild(props)}<Button {...props({ "aria-label": "Text formatting" })} size="icon-md" variant="outline"><TypeIcon aria-hidden="true" /></Button>{/snippet}</DropdownMenuTrigger><DropdownMenuContent class="w-48"><DropdownMenuItem value="bold"><BoldIcon aria-hidden="true" />Bold<DropdownMenuShortcut>⌘B</DropdownMenuShortcut></DropdownMenuItem><DropdownMenuItem value="italic"><ItalicIcon aria-hidden="true" />Italic<DropdownMenuShortcut>⌘I</DropdownMenuShortcut></DropdownMenuItem><DropdownMenuItem value="underline"><UnderlineIcon aria-hidden="true" />Underline<DropdownMenuShortcut>⌘U</DropdownMenuShortcut></DropdownMenuItem><DropdownMenuItem value="strikethrough"><StrikethroughIcon aria-hidden="true" />Strikethrough<DropdownMenuShortcut>⌘⇧X</DropdownMenuShortcut></DropdownMenuItem><DropdownMenuSeparator /><DropdownMenuItem value="code"><CodeIcon aria-hidden="true" />Code<DropdownMenuShortcut>⌘E</DropdownMenuShortcut></DropdownMenuItem></DropdownMenuContent></DropdownMenu>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 onSelect on DropdownMenu and check for details.value bold.
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
Sets value="bold", value="italic", value="underline", value="strikethrough" and value="code". The rest is on the Dropdown Menu page.
Button
Sets props, aria-label, Text, formatting, size="icon-md" and variant="outline". The rest is on the Button page.
