Dropdown Menu

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@line/abc-def-react/dropdown-menu";

<script setup lang="ts">
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@line/abc-def-vue/dropdown-menu";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@line/abc-def-react/dropdown-menu";
import { Button } from "@line/abc-def-react/button";

export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild><Button variant="outline">Actions</Button></DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Copy</DropdownMenuItem>
        <DropdownMenuItem>Reset</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

<script setup lang="ts">
import { Button } from "@line/abc-def-vue/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@line/abc-def-vue/dropdown-menu";
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger :as-child="true">
      <Button variant="outline">Actions</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>Copy</DropdownMenuItem>
      <DropdownMenuItem>Reset</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

Component tokens

Composition exports

Usage notes

• Use for actions, not form value selection.
• Place the most common actions first.
• Related component tokens use the `dropdown-menu` token group in `@line/abc-def-styles/css`.