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

Fullscreen

Copy to clipboard

<flux:input as="button" variant="filled" placeholder="Search..." icon="magnifying-glass" />

<flux:spacer />

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

Header

Create top navigation headers for your application

Brand

Display your company logo and name consistently

Navlist

Build vertical navigation lists with nested groups

Profile

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.

Built with by
Caleb Porzio and Hugo Sainte-Marie