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

Sidebar

A collapsible application sidebar with menu items and an inset content area. Requires Alpine.js via sidebar-provider.

Usage
Dashboard

Main content area.

example.blade.php 
<x-slate::sidebar-provider class="min-h-[240px] rounded-md border">
    <x-slate::sidebar>
        <x-slate::sidebar-header>
            <span class="text-sm font-semibold">Acme Inc</span>
        </x-slate::sidebar-header>
        <x-slate::sidebar-content>
            <x-slate::sidebar-menu>
                <x-slate::sidebar-menu-item>
                    <x-slate::sidebar-menu-button active href="#">Dashboard</x-slate::sidebar-menu-button>
                </x-slate::sidebar-menu-item>
                <x-slate::sidebar-menu-item>
                    <x-slate::sidebar-menu-button href="#">Settings</x-slate::sidebar-menu-button>
                </x-slate::sidebar-menu-item>
            </x-slate::sidebar-menu>
        </x-slate::sidebar-content>
        <x-slate::sidebar-footer>
            <span class="text-xs text-muted-foreground">v3.0.0</span>
        </x-slate::sidebar-footer>
    </x-slate::sidebar>
    <x-slate::sidebar-inset>
        <div class="flex h-14 items-center gap-2 border-b px-4">
            <x-slate::sidebar-trigger />
            <span class="text-sm font-medium">Dashboard</span>
        </div>
        <div class="p-4">
            <p class="text-sm text-muted-foreground">Main content area.</p>
        </div>
    </x-slate::sidebar-inset>
</x-slate::sidebar-provider>

Composition
code 
SidebarProvider
├── Sidebar
│   ├── SidebarHeader
│   ├── SidebarContent
│   │   └── SidebarMenu
│   │       └── SidebarMenuItem
│   │           └── SidebarMenuButton
│   └── SidebarFooter
├── SidebarInset
└── SidebarTrigger
Last updated .