Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/livewire/flux/llms.txt

Use this file to discover all available pages before exploring further.

Flux provides foundational layout components to structure your application’s UI, including headers, sidebars, footers, and containers. Application header with sticky positioning support:

​
Basic Usage

<flux:header>
    <flux:brand href="/" logo="/logo.svg" />
    
    <div class="ml-auto flex items-center gap-4">
        <flux:button href="/login">Login</flux:button>
        <flux:button variant="primary" href="/signup">Sign Up</flux:button>
    </div>
</flux:header>
Make the header stick to the top on scroll: 
<flux:header sticky>
    <flux:brand href="/" logo="/logo.svg" />
    <flux:navbar>
        <flux:navbar.item href="/products">Products</flux:navbar.item>
        <flux:navbar.item href="/pricing">Pricing</flux:navbar.item>
        <flux:navbar.item href="/docs">Docs</flux:navbar.item>
    </flux:navbar>
</flux:header>

​
With Container

Center content with max-width constraints: 
<flux:header container>
    <flux:brand href="/" logo="/logo.svg" />
    <!-- Content will be centered with max-width -->
</flux:header>

​
Header Props

PropTypeDefaultDescription
stickybooleanfalseEnable sticky positioning
containerbooleanfalseWrap content in centered container
Collapsible navigation sidebar for application layouts:

​
Basic Usage

<flux:sidebar>
    <flux:sidebar.brand href="/" logo="/logo.svg" name="My App" />
    
    <flux:navlist>
        <flux:navlist.item href="/dashboard" icon="home">Dashboard</flux:navlist.item>
        <flux:navlist.item href="/projects" icon="folder">Projects</flux:navlist.item>
        <flux:navlist.item href="/team" icon="users">Team</flux:navlist.item>
    </flux:navlist>
    
    <flux:spacer />
    
    <flux:navlist>
        <flux:navlist.item href="/settings" icon="cog">Settings</flux:navlist.item>
    </flux:navlist>
</flux:sidebar>

​
Collapsible Sidebar

Make the sidebar collapsible on desktop: 
<flux:sidebar collapsible>
    <flux:sidebar.toggle />
    
    <flux:sidebar.brand href="/" logo="/logo.svg" />
    
    <flux:navlist>
        <flux:navlist.item href="/dashboard" icon="home">Dashboard</flux:navlist.item>
        <flux:navlist.item href="/projects" icon="folder">Projects</flux:navlist.item>
    </flux:navlist>
</flux:sidebar>

​
Mobile Collapsible

Collapse on mobile devices only: 
<flux:sidebar collapsible="mobile">
    <!-- Automatically hidden on mobile, toggleable via sidebar.toggle -->
    <flux:navlist>
        <flux:navlist.item href="/dashboard" icon="home">Dashboard</flux:navlist.item>
    </flux:navlist>
</flux:sidebar>
Make sidebar content scroll independently: 
<flux:sidebar sticky>
    <!-- Sidebar content scrolls while page content scrolls independently -->
</flux:sidebar>

<flux:sidebar.brand 
    href="/" 
    logo="/logo.svg" 
    name="My Application"
/>

<flux:sidebar.toggle />
Displays a toggle button to collapse/expand the sidebar. 
<flux:sidebar.nav>
    <flux:sidebar.item href="/dashboard" icon="home">Dashboard</flux:sidebar.item>
    <flux:sidebar.item href="/analytics" icon="chart-bar">Analytics</flux:sidebar.item>
</flux:sidebar.nav>
Group related navigation items: 
<flux:sidebar.group heading="Projects">
    <flux:sidebar.item href="/projects/active">Active</flux:sidebar.item>
    <flux:sidebar.item href="/projects/archived">Archived</flux:sidebar.item>
</flux:sidebar.group>
Collapsible navigation groups: 
<flux:sidebar.collapse heading="Settings">
    <flux:sidebar.item href="/settings/profile">Profile</flux:sidebar.item>
    <flux:sidebar.item href="/settings/security">Security</flux:sidebar.item>
    <flux:sidebar.item href="/settings/billing">Billing</flux:sidebar.item>
</flux:sidebar.collapse>
PropTypeDefaultDescription
collapsibleboolean|stringfalseEnable collapsing: true, false, or mobile
stickybooleanfalseEnable sticky positioning
Application footer:

​
Basic Usage

<flux:footer>
    <div class="text-sm text-zinc-500">
        © 2024 My Company. All rights reserved.
    </div>
</flux:footer>

​
With Container

<flux:footer container>
    <div class="flex justify-between items-center">
        <div class="text-sm text-zinc-500">
            © 2024 My Company
        </div>
        <div class="flex gap-4">
            <a href="/privacy" class="text-sm hover:underline">Privacy</a>
            <a href="/terms" class="text-sm hover:underline">Terms</a>
        </div>
    </div>
</flux:footer>

​
Container

Centered content container with max-width:

​
Basic Usage

<flux:container>
    <h1>Page Content</h1>
    <p>This content is centered with a maximum width.</p>
</flux:container>

​
In Layouts

<flux:main>
    <flux:container>
        <flux:heading>Dashboard</flux:heading>
        
        <!-- Your page content -->
    </flux:container>
</flux:main>
The container applies:
  • Centered horizontal margins (mx-auto)
  • Maximum width of 1280px (max-w-7xl)
  • Responsive padding (px-6 lg:px-8)

​
Complete Layout Example

Here’s a complete application layout combining all components: 
<flux:layout>
    <flux:sidebar collapsible="mobile" sticky>
        <flux:sidebar.toggle />
        
        <flux:sidebar.brand 
            href="/" 
            logo="/logo.svg" 
            name="My App"
        />
        
        <flux:navlist>
            <flux:navlist.item href="/dashboard" icon="home">Dashboard</flux:navlist.item>
            <flux:navlist.item href="/projects" icon="folder">Projects</flux:navlist.item>
            <flux:navlist.item href="/team" icon="users">Team</flux:navlist.item>
        </flux:navlist>
        
        <flux:spacer />
        
        <flux:sidebar.profile />
    </flux:sidebar>
    
    <flux:header container sticky>
        <flux:sidebar.toggle class="lg:hidden" />
        
        <flux:navbar class="ml-auto">
            <flux:button variant="ghost" icon="bell" />
            <flux:dropdown position="bottom" align="end">
                <flux:button variant="ghost">
                    <img src="{{ auth()->user()->avatar }}" class="w-6 h-6 rounded-full" />
                </flux:button>
                <flux:menu>
                    <flux:menu.item href="/profile">Profile</flux:menu.item>
                    <flux:menu.item href="/settings">Settings</flux:menu.item>
                    <flux:menu.separator />
                    <flux:menu.item wire:click="logout">Logout</flux:menu.item>
                </flux:menu>
            </flux:dropdown>
        </flux:navbar>
    </flux:header>
    
    <flux:main>
        <flux:container>
            {{ $slot }}
        </flux:container>
    </flux:main>
    
    <flux:footer container>
        <div class="text-sm text-zinc-500">
            © 2024 My Company. All rights reserved.
        </div>
    </flux:footer>
</flux:layout>

​
Grid Areas

Layout components use CSS Grid areas for positioning: 
[grid-area:header]   /* Header */
[grid-area:sidebar]  /* Sidebar */
[grid-area:main]     /* Main content */
[grid-area:footer]   /* Footer */
This ensures proper layout flow and responsive behavior.

​
Responsive Design

  • Sidebars automatically adjust for mobile viewports
  • Container padding adapts to screen size
  • Headers can be made sticky for better navigation
  • Mobile-first approach with desktop enhancements
Use flux:layout as the root component to ensure proper grid layout for headers, sidebars, main content, and footers.

Build docs developers (and LLMs) love

Get started for freeTalk to us