Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button. Requires Alpine.js.

Usage
example.blade.php 
<x-slate::dropdown-menu>
    <x-slate::dropdown-menu-trigger>
        <x-slate::button variant="outline">Open</x-slate::button>
    </x-slate::dropdown-menu-trigger>
    <x-slate::dropdown-menu-content class="w-48">
        <x-slate::dropdown-menu-label>My Account</x-slate::dropdown-menu-label>
        <x-slate::dropdown-menu-separator />
        <x-slate::dropdown-menu-item>
            Profile
            <x-slate::dropdown-menu-shortcut>⇧⌘P</x-slate::dropdown-menu-shortcut>
        </x-slate::dropdown-menu-item>
        <x-slate::dropdown-menu-item>
            Billing
            <x-slate::dropdown-menu-shortcut>⌘B</x-slate::dropdown-menu-shortcut>
        </x-slate::dropdown-menu-item>
        <x-slate::dropdown-menu-item>
            Settings
            <x-slate::dropdown-menu-shortcut>⌘S</x-slate::dropdown-menu-shortcut>
        </x-slate::dropdown-menu-item>
        <x-slate::dropdown-menu-separator />
        <x-slate::dropdown-menu-item variant="destructive">
            Log out
        </x-slate::dropdown-menu-item>
    </x-slate::dropdown-menu-content>
</x-slate::dropdown-menu>

Composition
code 
DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuLabel
    ├── DropdownMenuSeparator
    ├── DropdownMenuItem
    └── DropdownMenuShortcut
Last updated .