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

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