Log in

Guides

Installation Upgrade guide Principles Patterns Theming Dark mode Customization Help

Layouts

Header Sidebar

Components

Accordion Autocomplete Avatar

Button Breadcrumbs Calendar

Checkbox Command Context Date picker

Dropdown Editor Field Heading Icon Input Modal Navbar Pagination

Radio Select Separator Switch Table Tabs Text

Textarea Toast Tooltip

Sidebar

Use a sidebar navigation layout to keep your application content front and center.

<head>    <!-- ... -->    @fluxAppearance</head><body class="min-h-screen bg-white dark:bg-zinc-800">    <flux:sidebar sticky stashable class="bg-zinc-50 dark:bg-zinc-900 border-r rtl:border-r-0 rtl:border-l border-zinc-200 dark:border-zinc-700">        <flux:sidebar.toggle class="lg:hidden" icon="x-mark" />        <flux:brand href="#" logo="https://fluxui.dev/img/demo/logo.png" name="Acme Inc." class="px-2 dark:hidden" />        <flux:brand href="#" logo="https://fluxui.dev/img/demo/dark-mode-logo.png" name="Acme Inc." class="px-2 hidden dark:flex" />        <flux:input as="button" variant="filled" placeholder="Search..." icon="magnifying-glass" />        <flux:navlist variant="outline">            <flux:navlist.item icon="home" href="#" current>Home</flux:navlist.item>            <flux:navlist.item icon="inbox" badge="12" href="#">Inbox</flux:navlist.item>            <flux:navlist.item icon="document-text" href="#">Documents</flux:navlist.item>            <flux:navlist.item icon="calendar" href="#">Calendar</flux:navlist.item>            <flux:navlist.group expandable heading="Favorites" class="hidden lg:grid">                <flux:navlist.item href="#">Marketing site</flux:navlist.item>                <flux:navlist.item href="#">Android app</flux:navlist.item>                <flux:navlist.item href="#">Brand guidelines</flux:navlist.item>            </flux:navlist.group>        </flux:navlist>        <flux:spacer />        <flux:navlist variant="outline">            <flux:navlist.item icon="cog-6-tooth" href="#">Settings</flux:navlist.item>            <flux:navlist.item icon="information-circle" href="#">Help</flux:navlist.item>        </flux:navlist>        <flux:dropdown position="top" align="start" class="max-lg:hidden">            <flux:profile avatar="https://fluxui.dev/img/demo/user.png" name="Olivia Martin" />            <flux:menu>                <flux:menu.radio.group>                    <flux:menu.radio checked>Olivia Martin</flux:menu.radio>                    <flux:menu.radio>Truly Delta</flux:menu.radio>                </flux:menu.radio.group>                <flux:menu.separator />                <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>            </flux:menu>        </flux:dropdown>    </flux:sidebar>    <flux:header class="lg:hidden">        <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />        <flux:spacer />        <flux:dropdown position="top" alignt="start">            <flux:profile avatar="https://fluxui.dev/img/demo/user.png" />            <flux:menu>                <flux:menu.radio.group>                    <flux:menu.radio checked>Olivia Martin</flux:menu.radio>                    <flux:menu.radio>Truly Delta</flux:menu.radio>                </flux:menu.radio.group>                <flux:menu.separator />                <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>            </flux:menu>        </flux:dropdown>    </flux:header>    <flux:main>        <flux:heading size="xl" level="1">Good afternoon, Olivia</flux:heading>        <flux:text class="mb-6 mt-2 text-base">Here's what's new today</flux:text>        <flux:separator variant="subtle" />    </flux:main>    @fluxScripts</body>

Secondary header

Use a top header for secondary navigation.

<head>    <!-- ... -->    @fluxAppearance</head><body class="min-h-screen bg-white dark:bg-zinc-800">    <flux:sidebar sticky stashable class="bg-zinc-50 dark:bg-zinc-900 border-r rtl:border-r-0 rtl:border-l border-zinc-200 dark:border-zinc-700">        <flux:sidebar.toggle class="lg:hidden" icon="x-mark" />        <flux:brand href="#" logo="https://fluxui.dev/img/demo/logo.png" name="Acme Inc." class="px-2 dark:hidden" />        <flux:brand href="#" logo="https://fluxui.dev/img/demo/dark-mode-logo.png" name="Acme Inc." class="px-2 hidden dark:flex" />        <flux:input as="button" variant="filled" placeholder="Search..." icon="magnifying-glass" />        <flux:navlist variant="outline">            <flux:navlist.item icon="home" href="#" current>Home</flux:navlist.item>            <flux:navlist.item icon="inbox" badge="12" href="#">Inbox</flux:navlist.item>            <flux:navlist.item icon="document-text" href="#">Documents</flux:navlist.item>            <flux:navlist.item icon="calendar" href="#">Calendar</flux:navlist.item>            <flux:navlist.group expandable heading="Favorites" class="hidden lg:grid">                <flux:navlist.item href="#">Marketing site</flux:navlist.item>                <flux:navlist.item href="#">Android app</flux:navlist.item>                <flux:navlist.item href="#">Brand guidelines</flux:navlist.item>            </flux:navlist.group>        </flux:navlist>        <flux:spacer />        <flux:navlist variant="outline">            <flux:navlist.item icon="cog-6-tooth" href="#">Settings</flux:navlist.item>            <flux:navlist.item icon="information-circle" href="#">Help</flux:navlist.item>        </flux:navlist>        <flux:dropdown position="top" align="start" class="max-lg:hidden">            <flux:profile avatar="https://fluxui.dev/img/demo/user.png" name="Olivia Martin" />            <flux:menu>                <flux:menu.radio.group>                    <flux:menu.radio checked>Olivia Martin</flux:menu.radio>                    <flux:menu.radio>Truly Delta</flux:menu.radio>                </flux:menu.radio.group>                <flux:menu.separator />                <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>            </flux:menu>        </flux:dropdown>    </flux:sidebar>    <flux:header class="block! bg-white lg:bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700">        <flux:navbar class="lg:hidden w-full">            <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />            <flux:spacer />            <flux:dropdown position="top" align="start">                <flux:profile avatar="https://fluxui.dev/img/demo/user.png" />                <flux:menu>                    <flux:menu.radio.group>                        <flux:menu.radio checked>Olivia Martin</flux:menu.radio>                        <flux:menu.radio>Truly Delta</flux:menu.radio>                    </flux:menu.radio.group>                    <flux:menu.separator />                    <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>                </flux:menu>            </flux:dropdown>        </flux:navbar>        <flux:navbar scrollable>            <flux:navbar.item href="#" current>Dashboard</flux:navbar.item>            <flux:navbar.item badge="32" href="#">Orders</flux:navbar.item>            <flux:navbar.item href="#">Catalog</flux:navbar.item>            <flux:navbar.item href="#">Configuration</flux:navbar.item>        </flux:navbar>    </flux:header>    <flux:main>        <flux:heading size="xl" level="1">Good afternoon, Olivia</flux:heading>        <flux:text class="mb-6 mt-2 text-base">Here's what's new today</flux:text>        <flux:separator variant="subtle" />    </flux:main>    @fluxScripts</body>

Related components

Create top navigation headers for your application

Display your company logo and name consistently

Build vertical navigation lists with nested groups

Show user avatars and profile information

Reference

flux:sidebar

Prop	Description
sticky	When present, makes the sidebar sticky when scrolling.
stashable	When present, allows the sidebar to be toggled on/off on smaller screens.

Slot	Description
default	Content to display within the sidebar, typically including branding, navigation elements, and user profile.

CSS	Description
class	Additional CSS classes applied to the sidebar. Common uses: bg-zinc-50, border-r, etc.

flux:sidebar.toggle

Attribute	Description
icon	The icon to display in the toggle button (e.g., bars-2, x-mark).
inset	Positioning of the toggle button (e.g., left).

CSS	Description
class	Additional CSS classes applied to the toggle button. Common uses: lg:hidden to show only on mobile.

flux:main

Prop	Description
container	When present, constrains the main content to a container width.

Slot	Description
default	Content to display within the main content area.

Copyright © 2025 Wireable LLC ·Terms of Service

Built with by
Caleb Porzio and Hugo Sainte-Marie