Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dropdown Menu - View Options
A React view options dropdown combining DropdownMenuRadioGroup for layout selection and DropdownMenuCheckboxItem for display toggles
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
File managers and content browsers need flexible views—grid for images, list for details, columns for hierarchy. This React view options dropdown uses shadcn/ui DropdownMenu with Eye icon trigger featuring DropdownMenuRadioGroup for Layout (List, Grid, Column) and DropdownMenuCheckboxItem for Display Options (Show Hidden Files, Compact Mode, Show Preview) from Lucide React. Built with Radix UI primitives combining radio and checkbox patterns. The view options pattern improves browsing—perfect for file managers, media galleries, admin panels, or anywhere content layout needs user control.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Theme Selector
Theme selection with radio group
Preferences Dropdown
Editor preference checkboxes
Radio Group Dropdown
Single selection menu
Checkbox Dropdown
Multiple selection toggles
Button Group
Alternative view toggle UI
Toggle Component
View mode switch
Questions you might have
React Dropdown Menu - Notification Settings
A React notification settings dropdown with grouped sections for Notification Channels and Notify Me About using DropdownMenuCheckboxItem
React Dropdown Menu - Simple Dropdown with Icons
A React dropdown menu with icon-labeled items for profile, settings, help, and logout actions built with shadcn/ui and Radix UI