Dropdown menu - Pharen

Use Dropdown menu to show contextual content or user feedback. This page covers every Vue component exported by the public module.

View code

<script setup lang="ts">
import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from '@pharen/ui';
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child><Button variant="outline">Workspace actions</Button></DropdownMenuTrigger>
    <DropdownMenuContent class="w-56">
      <DropdownMenuLabel>Actions</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuItem>Open settings<DropdownMenuShortcut>⌘,</DropdownMenuShortcut></DropdownMenuItem>
      <DropdownMenuItem>Invite members<DropdownMenuShortcut>⌘I</DropdownMenuShortcut></DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem class="text-destructive">Leave workspace</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

Installation

npm install @pharen/ui

pnpm add @pharen/ui

yarn add @pharen/ui

bun add @pharen/ui

Import @pharen/ui/styles.css exactly once in your application entrypoint.

Usage

import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownMenuPortal } from '@pharen/ui';

Exports

Export	Purpose
`DropdownMenu`	Exported Vue component from this module.
`DropdownMenuCheckboxItem`	Represents one item.
`DropdownMenuContent`	Contains the visible content.
`DropdownMenuGroup`	Groups related items.
`DropdownMenuItem`	Represents one item.
`DropdownMenuLabel`	Labels a value or region.
`DropdownMenuRadioGroup`	Groups related items.
`DropdownMenuRadioItem`	Represents one item.
`DropdownMenuSeparator`	Separates adjacent regions.
`DropdownMenuShortcut`	Exported Vue component from this module.
`DropdownMenuSub`	Exported Vue component from this module.
`DropdownMenuSubContent`	Contains the visible content.
`DropdownMenuSubTrigger`	Opens or activates the component.
`DropdownMenuTrigger`	Opens or activates the component.
`DropdownMenuPortal`	Exported Vue component from this module.

Source

Open the source on GitHub