Layouts
Sidebar
A navigation column, collapsible on desktop and off-canvas on mobile.
A sidebar placed before the header owns the full page height. In RTL it sits on the right automatically.
<flux:sidebar sticky class="border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
<flux:sidebar.header>
<flux:sidebar.brand href="/" name="Majid DS" />
</flux:sidebar.header>
<flux:sidebar.search placeholder="Search products..." kbd="⌘K" />
<flux:sidebar.nav>
<flux:sidebar.item href="#" icon="home" current>Dashboard</flux:sidebar.item>
<flux:sidebar.item href="#" icon="shopping-bag" badge="3">My orders</flux:sidebar.item>
<flux:sidebar.item href="#" icon="heart">Favorites</flux:sidebar.item>
<flux:sidebar.group heading="Categories" icon="squares-2x2" expandable :expanded="true">
<flux:sidebar.item href="#">Phones & tablets</flux:sidebar.item>
<flux:sidebar.item href="#">Home appliances</flux:sidebar.item>
</flux:sidebar.group>
</flux:sidebar.nav>
<flux:sidebar.spacer />
<flux:sidebar.nav>
<flux:sidebar.item href="#" icon="cog-6-tooth">Settings</flux:sidebar.item>
</flux:sidebar.nav>
<flux:sidebar.profile avatar="/me.jpg" name="Sara Rezaei" />
</flux:sidebar>This preview is a still of the sidebar's contents. For the real thing — collapsing to an icon rail, sliding in over a backdrop on mobile — open the layout gallery.
Collapsible
collapsible collapses the sidebar to an icon rail on desktop; collapsible="mobile" keeps it in the grid on desktop and turns it into an off-canvas panel below lg. Items fall back to their tooltips once the labels are hidden.
<flux:sidebar sticky collapsible>
<flux:sidebar.header>
<flux:sidebar.brand href="/" name="Majid DS" />
<flux:sidebar.collapse tooltip="Collapse sidebar" />
</flux:sidebar.header>
<flux:sidebar.nav>
<flux:sidebar.item href="#" icon="home" tooltip="Dashboard" current>Dashboard</flux:sidebar.item>
</flux:sidebar.nav>
</flux:sidebar>
{{-- In the header, for mobile --}}
<flux:sidebar.toggle class="lg:hidden" icon="bars-2" aria-label="Open menu" />