Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Settings

View Options Dropdown Menu for React

A view options menu with one layout to pick, list, grid or columns, and display toggles below it.

Framework
UI library

File browsers need a grid for pictures, a list for details and columns for folders. This dropdown menu opens from an eye icon button and pairs a Layout radio group (List View, Grid View, Column View) with Display Options checkbox rows (Show Hidden Files, Compact Mode, Show Preview). It fits file managers, galleries and asset libraries.

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 layout choice work?

One value, grid to start, out of list, grid and columns. Picking a layout moves the check. DropdownMenuRadioGroup takes value, and onValueChange receives the new value.

Which display rows start checked?

Only Show Preview. Show Hidden Files and Compact Mode start off, and each toggles on its own.

Why are radios and checkboxes in one menu?

The layout is one choice out of three, so it's a radio group; the display options can be on together, so they're checkbox rows. A separator and their own labels keep the two kinds apart.

What does the trigger look like?

An outline Button with size="icon-md", an eye icon and aria-label set to View options. The menu is w-56.

Can I change the view from the keyboard?

Yes. Arrow keys move through both groups, Enter picks a layout, and Enter or Space toggles a display row. Escape closes the menu.

Are Layout and Display Options choices?

No. They're DropdownMenuLabels that name their groups. They can't be focused or picked.

All 30 dropdown menu examples