Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Standard

Dropdown with Radio Items Dropdown Menu for React

A panel position picker where exactly one of Top, Bottom, Right or Left is checked.

Framework
UI library

Several options, only one active at a time: that's a radio group. This dropdown menu opens from a Position button and lists Top, Bottom, Right and Left as radio items under a Panel Position label, with Bottom checked to start. It fits layout settings, sort orders and any single choice in a menu.

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 panel position stay selected?

The chosen position is one value, bottom to start, kept in the component. Picking a row stores its value and moves the check. DropdownMenuRadioGroup takes value, and onValueChange receives the new value.

What is Panel Position?

The DropdownMenuLabel at the top of the radio group, followed by a separator. It names the group and can't be picked.

What does the trigger look like?

An outline Button that reads Position, with a chevron after it. The menu is w-56.

Can Top and Bottom both be selected?

No. The group holds one value, so picking Top unchecks Bottom. Use checkbox rows for options that can be on together.

Can I move the selection from the keyboard?

Yes. Arrow keys move the highlight and Enter or Space checks the highlighted row. Escape closes the menu and returns focus to the button.

Does the button show Top or Bottom?

No. It always reads Position. Print the value in the button, such as Position: Bottom, if people should see it without opening the menu.

All 30 dropdown menu examples