Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

View Options Dropdown Menu for Ark UI

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

An eye button opens one layout, List, Grid, or Column, starting on Grid, then checkboxes for hidden files, compact mode, and preview.

Use it in a file browser when layout is one choice and display flags can combine. If the layout should stay on screen, use a Toggle Group. In React, Ark UI stores the value and does not change the files.

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

Anatomy

Dropdown Menu anatomy: trigger, label, item, shortcut, separator, sub trigger, content

Usage

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button aria-label="View options" size="icon-md" variant="outline">
      <EyeIcon aria-hidden="true" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuRadioGroup
      onValueChange={handleLayoutChange}
      value={layout}
    >
      <DropdownMenuLabel>Layout</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuRadioItem value="list">
        <ListIcon aria-hidden="true" />
        List View
      </DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="grid">
        <Grid3x3Icon aria-hidden="true" />
        Grid View
      </DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="columns">
        <Columns3Icon aria-hidden="true" />
        Column View
      </DropdownMenuRadioItem>
    </DropdownMenuRadioGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuLabel>Display Options</DropdownMenuLabel>
      <DropdownMenuCheckboxItem
        checked={showHiddenFiles}
{/* The rest of the file is under Installation. */}

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 details.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.

API Reference

Dropdown Menu

Sets asChild, onValueChange={handleLayoutChange}, value={layout}, value="list", value="grid" and value="columns". The rest is on the Dropdown Menu page.

Button

Sets aria-label="View options", size="icon-md" and variant="outline". The rest is on the Button page.

All 30 dropdown menu examples