Components
Sidebar
A composable, themeable and customizable sidebar component.
php artisan blatui:add sidebar
<div class="bg-sidebar text-sidebar-foreground flex h-[400px] w-[260px] flex-col overflow-hidden rounded-lg border">
<x-ui.sidebar-content>
<x-ui.sidebar-group>
<x-ui.sidebar-group-label>Application</x-ui.sidebar-group-label>
<x-ui.sidebar-group-content>
<x-ui.sidebar-menu>
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button is-active>
<x-lucide-house />
<span>Home</span>
</x-ui.sidebar-menu-button>
</x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button>
<x-lucide-inbox />
<span>Inbox</span>
</x-ui.sidebar-menu-button>
</x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button>
<x-lucide-calendar />
<span>Calendar</span>
</x-ui.sidebar-menu-button>
</x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button>
<x-lucide-search />
<span>Search</span>
</x-ui.sidebar-menu-button>
</x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button>
<x-lucide-settings />
<span>Settings</span>
</x-ui.sidebar-menu-button>
</x-ui.sidebar-menu-item>
</x-ui.sidebar-menu>
</x-ui.sidebar-group-content>
</x-ui.sidebar-group>
</x-ui.sidebar-content>
</div>Header Footer
<div class="bg-sidebar text-sidebar-foreground flex h-[460px] w-[260px] flex-col overflow-hidden rounded-lg border">
<x-ui.sidebar-header>
<div class="flex items-center gap-2 px-2 py-1">
<span class="bg-sidebar-primary text-sidebar-primary-foreground flex size-8 items-center justify-center rounded-lg">
<x-lucide-component class="size-4" aria-hidden="true" />
</span>
<div class="text-sm leading-tight">
<div class="font-semibold">Acme Inc</div>
<div class="text-muted-foreground text-xs">Enterprise</div>
</div>
</div>
</x-ui.sidebar-header>
<x-ui.sidebar-content>
<x-ui.sidebar-group>
<x-ui.sidebar-group-label>Application</x-ui.sidebar-group-label>
<x-ui.sidebar-group-content>
<x-ui.sidebar-menu>
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button is-active><x-lucide-house /><span>Home</span></x-ui.sidebar-menu-button>
</x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button><x-lucide-inbox /><span>Inbox</span></x-ui.sidebar-menu-button>
</x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button><x-lucide-calendar /><span>Calendar</span></x-ui.sidebar-menu-button>
</x-ui.sidebar-menu-item>
</x-ui.sidebar-menu>
</x-ui.sidebar-group-content>
</x-ui.sidebar-group>
</x-ui.sidebar-content>
<x-ui.sidebar-footer>
<div class="flex items-center gap-2 px-2 py-1">
<x-ui.avatar class="size-8"><x-ui.avatar-fallback>SC</x-ui.avatar-fallback></x-ui.avatar>
<div class="text-sm leading-tight">
<div class="font-medium">Sofia Carter</div>
<div class="text-muted-foreground text-xs">[email protected]</div>
</div>
</div>
</x-ui.sidebar-footer>
</div>Submenu
<div class="bg-sidebar text-sidebar-foreground flex h-[420px] w-[260px] flex-col overflow-hidden rounded-lg border">
<x-ui.sidebar-content>
<x-ui.sidebar-group>
<x-ui.sidebar-group-label>Platform</x-ui.sidebar-group-label>
<x-ui.sidebar-group-content>
<x-ui.sidebar-menu>
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button><x-lucide-inbox /><span>Inbox</span></x-ui.sidebar-menu-button>
<x-ui.sidebar-menu-badge>12</x-ui.sidebar-menu-badge>
</x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-item>
<x-ui.sidebar-menu-button is-active><x-lucide-settings /><span>Settings</span></x-ui.sidebar-menu-button>
<x-ui.sidebar-menu-sub>
<x-ui.sidebar-menu-sub-item>
<x-ui.sidebar-menu-sub-button href="#">General</x-ui.sidebar-menu-sub-button>
</x-ui.sidebar-menu-sub-item>
<x-ui.sidebar-menu-sub-item>
<x-ui.sidebar-menu-sub-button href="#" is-active>Team</x-ui.sidebar-menu-sub-button>
</x-ui.sidebar-menu-sub-item>
<x-ui.sidebar-menu-sub-item>
<x-ui.sidebar-menu-sub-button href="#">Billing</x-ui.sidebar-menu-sub-button>
</x-ui.sidebar-menu-sub-item>
</x-ui.sidebar-menu-sub>
</x-ui.sidebar-menu-item>
</x-ui.sidebar-menu>
</x-ui.sidebar-group-content>
</x-ui.sidebar-group>
</x-ui.sidebar-content>
</div>API Reference
Props, slots and exposed methods for
<x-ui.sidebar>.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
side |
string
|
'left'
|
Which edge of the layout the sidebar is pinned to. Also sets the slide-in direction of the mobile overlay.
left
right
|
variant |
string
|
'sidebar'
|
Visual treatment of the panel, exposed as a data-variant for styling.
sidebar
floating
inset
|
collapsible |
string
|
'offcanvas'
|
Collapse behaviour on desktop. "offcanvas" slides the panel fully out of view, "icon" shrinks it to an icon rail, and "none" renders a static in-flow panel that never collapses.
offcanvas
icon
none
|
mobileBreakpoint |
string
|
'767px'
|
Since 1.24. Set on <x-ui.sidebar-provider>. Viewport width below which the sidebar becomes an off-canvas drawer instead of collapsing to the icon rail. Raise it to 1023px to get the drawer on tablets too, where an always-docked rail often costs more room than it earns. A bare number is read as px; anything else is passed to matchMedia as written. |
tooltip |
string
|
— | Since 1.23. Set on <x-ui.sidebar-menu-button>. Label shown on hover or focus while the sidebar is collapsed to the icon rail, where the button text is clipped away — opt in per button, as in shadcn/ui. It is a visual affordance only: the label <span> stays in the DOM when collapsed, so the accessible name never depended on it. |
Slots
| Slot | Description |
|---|---|
default |
The sidebar contents — typically <x-ui.sidebar-header>, <x-ui.sidebar-content> (with sidebar-group / sidebar-menu items) and <x-ui.sidebar-footer>. The same markup is reused for the desktop panel and the mobile overlay. |
Methods
Available on the component's Alpine scope — call them from markup in the slot
(e.g. @click="…").
| Method | Description |
|---|---|
toggle() |
Toggles the sidebar — opens/closes the mobile overlay on small screens, or expands/collapses the desktop panel otherwise. Provided by <x-ui.sidebar-provider> and used by <x-ui.sidebar-trigger>. |