DropdownMenu

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download dropdown-menu -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { DropdownMenu } from "@/components/ui/dropdown-menu";
import { DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { DropdownMenuContent } from "@/components/ui/dropdown-menu";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { reactive } from "vue";

const args = reactive({
  "open": false,
  "label": "Open menu",
});
</script>

<template>
  <DropdownMenu v-model:open="args.open"
    ><DropdownMenuTrigger as-child
      ><Button>{{ args.label }}</Button></DropdownMenuTrigger
    ><DropdownMenuContent
      ><DropdownMenuItem>Profile</DropdownMenuItem
      ><DropdownMenuItem>Settings</DropdownMenuItem></DropdownMenuContent
    ></DropdownMenu
  >
</template>

Examples

Default

<script setup lang="ts">
import { DropdownMenu } from "@/components/ui/dropdown-menu";
import { DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { DropdownMenuContent } from "@/components/ui/dropdown-menu";
import { DropdownMenuLabel } from "@/components/ui/dropdown-menu";
import { DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
import { DropdownMenuGroup } from "@/components/ui/dropdown-menu";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { Icon } from "@/components/ui/icon";
import { DropdownMenuShortcut } from "@/components/ui/dropdown-menu";
import { DropdownMenuSub } from "@/components/ui/dropdown-menu";
import { DropdownMenuSubTrigger } from "@/components/ui/dropdown-menu";
import { DropdownMenuPortal } from "@/components/ui/dropdown-menu";
import { DropdownMenuSubContent } from "@/components/ui/dropdown-menu";

const args = {

};
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="tertiary" size="lg">Open</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent v-bind="args">
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuGroup>
        <DropdownMenuItem>
          <Icon name="User" size="4" class="mr-2" />
          <span>Profile</span>
          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Icon name="CreditCard" size="4" class="mr-2" />
          <span>Billing</span>
          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Icon name="Settings" size="4" class="mr-2" />
          <span>Settings</span>
          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Icon name="Keyboard" size="4" class="mr-2" />
          <span>Keyboard shortcuts</span>
          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuGroup>
      <DropdownMenuSeparator />
      <DropdownMenuGroup>
        <DropdownMenuItem>
          <Icon name="Users" size="4" class="mr-2" />
          <span>Team</span>
        </DropdownMenuItem>
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>
            <Icon name="UserPlus" size="4" class="mr-2" />
            <span class="pl-2">Invite users</span>
          </DropdownMenuSubTrigger>
          <DropdownMenuPortal>
            <DropdownMenuSubContent>
              <DropdownMenuItem>
                <Icon name="Mail" size="4" class="mr-2" />
                <span>Email</span>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Icon name="MessageSquare" size="4" class="mr-2" />
                <span>Message</span>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem>
                <Icon name="CirclePlus" size="4" class="mr-2" />
                <span>More...</span>
              </DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuPortal>
        </DropdownMenuSub>
        <DropdownMenuItem>
          <Icon name="Plus" size="4" class="mr-2" />
          <span>New Team</span>
          <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuGroup>
      <DropdownMenuSeparator />
      <DropdownMenuItem>
        <Icon name="Github" size="4" class="mr-2" />
        <span>GitHub</span>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <Icon name="LifeBuoy" size="4" class="mr-2" />
        <span>Support</span>
      </DropdownMenuItem>
      <DropdownMenuItem disabled>
        <Icon name="Cloud" size="4" class="mr-2" />
        <span>API</span>
      </DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem variant="destructive">
        <Icon name="LogOut" size="4" class="mr-2" />
        <span>Log out</span>
        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

Checkboxes

<script setup lang="ts">
import { DropdownMenu } from "@/components/ui/dropdown-menu";
import { DropdownMenuCheckboxItem } from "@/components/ui/dropdown-menu";
import { DropdownMenuContent } from "@/components/ui/dropdown-menu";
import { DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { ref } from "vue";
import type { DropdownMenuCheckboxItemProps } from "radix-vue";

// Internal Components
type Checked = DropdownMenuCheckboxItemProps["checked"];

const DropdownMenuCheckboxExample = {
  components: {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuTrigger,
    Button,
  },
  setup() {
    const showStatusBar = ref<Checked>(true);
    const showActivityBar = ref<Checked>(false);
    const showPanel = ref<Checked>(true);
    return {
      showStatusBar,
      showActivityBar,
      showPanel,
    };
  },
  template: `
    <DropdownMenu>
      <DropdownMenuTrigger as-child>
        <Button variant="tertiary" icon="Columns3" iconPosition="prefix">
          Columns
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent class="w-[160px]" align="start">
        <DropdownMenuCheckboxItem
          v-model:checked="showStatusBar"
        >
          Column 1
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem
          v-model:checked="showActivityBar"
        >
          Column 2
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem
          v-model:checked="showPanel"
        >
          Column 3
        </DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  `,
};

const args = {

};
</script>

<template>
  <DropdownMenuCheckboxExample />
</template>

Radio

<script setup lang="ts">
import { DropdownMenu } from "@/components/ui/dropdown-menu";
import { DropdownMenuContent } from "@/components/ui/dropdown-menu";
import { DropdownMenuLabel } from "@/components/ui/dropdown-menu";
import { DropdownMenuRadioGroup } from "@/components/ui/dropdown-menu";
import { DropdownMenuRadioItem } from "@/components/ui/dropdown-menu";
import { DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
import { DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { ref } from "vue";

const DropdownMenuRadioExample = {
  components: {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuLabel,
    DropdownMenuRadioGroup,
    DropdownMenuRadioItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
    Button,
  },
  setup() {
    const position = ref("bottom");
    return {
      position,
    };
  },
  template: `
    <DropdownMenu>
      <DropdownMenuTrigger as-child>
        <Button variant="tertiary">
          Open
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent class="w-56">
        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuRadioGroup v-model="position">
          <DropdownMenuRadioItem value="top">
            Top
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="bottom">
            Bottom
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="right">
            Right
          </DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  `,
};

const args = {

};
</script>

<template>
  <DropdownMenuRadioExample />
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

DropdownMenuItem

DropdownMenuLabel

DropdownMenuSeparator

DropdownMenuShortcut

DropdownMenuSubContent

DropdownMenuSubTrigger

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.