blatui

Components

Sidebar

A composable, themeable and customizable sidebar component.

php artisan blatui:add sidebar
Application 
<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

Acme Inc
Enterprise
Application
SC
Sofia Carter
[email protected]
<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

Platform 
<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.
persist bool|string false Since 1.36. Set on <x-ui.sidebar-provider>. Remembers the desktop expanded/collapsed state in a cookie (`sidebar_state`, or the name you pass instead of `true`). The cookie is read on the server, so the first paint is already in the remembered state — no flash on a reload, a wire:navigate visit or a Livewire re-render — and it is read from the raw Cookie header, so it needs no EncryptCookies exception. Give two persisting providers on one page different names.
style string — Since 1.36. On <x-ui.sidebar-provider>, the expand/collapse animation is tunable with two CSS variables: --sidebar-duration (default 200ms) and --sidebar-ease (default cubic-bezier(0.32, 0.72, 0, 1), an ease-out — it was linear before). Example: style="--sidebar-duration: 300ms". Reduced-motion users get no animation.
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. Since 1.36, an item with a <x-ui.sidebar-menu-sub> stays reachable in the icon rail: clicking its button (or Enter, or the arrow pointing away from the rail) opens the sub list as a flyout beside it, with Up/Down/Home/End between the links and Escape back to the button.

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>.