Tile UI Vue
Source code

Components

DropdownMenu

Dropdown menu with checkbox and radio items.

Use DropdownMenu to offer a list of actions from a trigger.

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@tile-ui/vue';
 
export default function DropdownMenuDemo() {
	return (
		<DropdownMenu>
			<DropdownMenuTrigger class="component-preview__action">Open menu</DropdownMenuTrigger>

Registry install

pnpm dlx shadcn@latest add @tile-ui/dropdown-menu

Package usage

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@tile-ui/vue';
 
<DropdownMenu>
	<DropdownMenuTrigger>Menu</DropdownMenuTrigger>
	<DropdownMenuContent>
		<DropdownMenuItem>Profile</DropdownMenuItem>
		<DropdownMenuItem>Settings</DropdownMenuItem>
	</DropdownMenuContent>
</DropdownMenu>

Highlights

  • Item, checkbox item, and radio group
  • Sub menus
  • Side, align, and offset

Registry dependencies

Item Purpose
dropdown-menu Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Prop Type Default
open boolean —
defaultOpen boolean —
onOpenChange (open: boolean) => void —
Prop Type Default
asChild boolean —
Prop Type Default
side 'top' | 'right' | 'bottom' | 'left' —
align 'start' | 'center' | 'end' —
sideOffset number —
alignOffset number —
Prop Type Default
inset boolean —
variant 'default' | 'destructive' —
disabled boolean —
onSelect (event: Event) => void —
Prop Type Default
checked boolean —
defaultChecked boolean —
onCheckedChange (checked: boolean) => void —
disabled boolean —
onSelect (event: Event) => void —
Prop Type Default
value string —
defaultValue string —
onValueChange (value: string) => void —
Prop Type Default
value string —
disabled boolean —
onSelect (event: Event) => void —
Prop Type Default
inset boolean —
Prop Type Default
open boolean —
defaultOpen boolean —
onOpenChange (open: boolean) => void —
Prop Type Default
inset boolean —
disabled boolean —
PreviousDrawerNextEmpty