Header

A header holds a brand, a navbar, a flux:spacer and then the actions. sticky pins it; container caps its contents at the same width as the main column.

M

Majid DS

main

<flux:header sticky container class="border-b border-zinc-200 dark:border-zinc-700">
    <flux:brand href="/" name="Majid DS" />

    <flux:navbar class="max-lg:hidden">
        <flux:navbar.item href="#" current>Home</flux:navbar.item>
        <flux:navbar.item href="#">Flash deals</flux:navbar.item>
    </flux:navbar>

    <flux:spacer />

    <flux:button icon="shopping-cart" square variant="subtle" aria-label="Cart" />
    <flux:profile avatar="/me.jpg" name="Sara Rezaei" />
</flux:header>

Mobile menu

Below lg, swap the navbar for a dropdown holding a flux:navmenu.

<flux:dropdown position="bottom" align="end" class="lg:hidden">
    <flux:button variant="subtle" icon="bars-2" square aria-label="Main menu" />

    <flux:navmenu>
        <flux:navmenu.item href="#" icon="home">Home</flux:navmenu.item>
        <flux:navmenu.item href="#" icon="fire">Flash deals</flux:navmenu.item>
    </flux:navmenu>
</flux:dropdown>

Reference

flux:header

Prop	Description
sticky	Pins the header to the top of the viewport.
container	Caps the contents at `max-w-7xl` and centres them.

Mobile menu

Reference

flux:header

Related