Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Editor

Heading Selector Dropdown Menu for React

A heading level picker from H1 to H6, each row drawn at its own size and the button showing the current level.

Framework
UI library

A heading picker should show what each level looks like before you pick it. This dropdown menu lists Heading 1 to Heading 6 as radio items, each in bold at its own text size, and the outline button reads the current level, such as H1. It fits document editors, Markdown tools and site 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 does the current heading show on the button?

The value starts at h1, and the button prints it in uppercase, H1, after a heading icon. Picking another row updates the value and the button. DropdownMenuRadioGroup takes value, and onValueChange receives the new value.

How are the rows sized?

Each row wraps its label in a bold span: Heading 1 is text-2xl, then text-xl, text-lg, text-base and text-sm, down to text-xs for Heading 6.

How wide is the menu?

w-48, and the six radio rows are the whole menu.

Can two heading levels be selected?

No. The radio group keeps one value. Choosing Heading 3 stores h3, moves the check to that row and changes the button to H3.

Can I pick a heading from the keyboard?

Yes. Arrow Up and Arrow Down move between rows, Enter picks one, typing H jumps through the Heading rows, and Escape closes the menu and returns focus to the button.

Are the rows real heading elements?

No. Each row's label is a styled span, which keeps the menu's structure valid for screen readers. The value is just the string h1 to h6; apply the real heading in your editor.

All 30 dropdown menu examples