Skip to content

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

Free

View Options Dropdown Menu for Vue

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

UI library: Ark UI

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 Vue, Ark UI stores the value and does not change the files.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<DropdownMenu>
  <DropdownMenuTrigger :asChild="true">
    <Button aria-label="View options" size="icon-md" variant="outline">
      <EyeIcon aria-hidden="true" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-56">
    <DropdownMenuRadioGroup @value-change="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"
        @checked-change="setShowHiddenFiles"
        value="show-hidden-files"
      >
        Show Hidden Files
      </DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem
<!-- 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 @value-change 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, value-change="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