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

Menubar

A horizontal menu bar with dropdown submenus. Only one menu opens at a time. Requires Alpine.js.

Usage
example.blade.php 
<x-slate::menubar>
    <x-slate::menubar-menu>
        <x-slate::menubar-trigger>File</x-slate::menubar-trigger>
        <x-slate::menubar-content>
            <x-slate::menubar-item>New tab</x-slate::menubar-item>
            <x-slate::menubar-item>New window</x-slate::menubar-item>
            <x-slate::menubar-separator />
            <x-slate::menubar-item>Share</x-slate::menubar-item>
        </x-slate::menubar-content>
    </x-slate::menubar-menu>
    <x-slate::menubar-menu>
        <x-slate::menubar-trigger>Edit</x-slate::menubar-trigger>
        <x-slate::menubar-content>
            <x-slate::menubar-item>Undo</x-slate::menubar-item>
            <x-slate::menubar-item>Redo</x-slate::menubar-item>
        </x-slate::menubar-content>
    </x-slate::menubar-menu>
</x-slate::menubar>

Composition
code 
Menubar
└── MenubarMenu
    ├── MenubarTrigger
    └── MenubarContent
        ├── MenubarItem
        └── MenubarSeparator
Last updated .