Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Editor

Block Type Selector Dropdown Menu for React

An Insert Block menu with text, list and media blocks under Basic Blocks, Lists and Media labels.

Framework
UI library

Block editors need a tidy list of what you can add. This dropdown menu opens from an Insert Block button and sorts nine block types into three labeled groups: Text, Quote and Divider under Basic Blocks; Bulleted, Numbered and To-do lists under Lists; Image, Embed and Code Block under Media. It fits block editors, docs tools and page builders.

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 are the block types grouped?

Three DropdownMenuGroups, each starting with a DropdownMenuLabel: Basic Blocks, Lists and Media, with a DropdownMenuSeparator between groups. The label inside the group names it for screen readers too.

Which icon leads each row?

Type, quote, minus, list, ordered list, checked square, image, link and code icons, one per row and aria-hidden, before the label. The menu is w-56.

Is Basic Blocks a choice?

No. A DropdownMenuLabel is a heading: it can't be focused or picked, and the arrow keys skip it.

What does the trigger look like?

An outline Button with a plus icon before the words Insert Block.

How do I insert the chosen block?

The menu closes after a choice; insert the block where your library reports it. Set onClick on each DropdownMenuItem.

Can I reach Code Block from the keyboard?

Yes. End jumps to the last row, Code Block, and typing C moves to the next row starting with C. Enter picks it and Escape closes the menu.

All 30 dropdown menu examples