Sidebar - Laravel Blade

Use the sidebar component to show a list of menu items and multi-level dropdown items on the left side of your page for navigation purposes.

Default Sidebar

Blade code

<x-fwb.sidebar id="default-sidebar">
    <x-fwb.sidebar.item href="#" :active="true" fwb-icon="s-home">Dashboard</x-fwb.sidebar.item>
    <x-fwb.sidebar.item href="#" fwb-icon="o-grid">Kanban</x-fwb.sidebar.item>
    <x-fwb.sidebar.item href="#" badge="3" fwb-icon="o-inbox">Inbox</x-fwb.sidebar.item>
    <x-fwb.sidebar.item href="#" fwb-icon="o-users">Users</x-fwb.sidebar.item>
    <x-fwb.sidebar.item href="#" fwb-icon="o-arrow-right">Sign In</x-fwb.sidebar.item>
</x-fwb.sidebar>

Multi-level Dropdown

Blade code

<x-fwb.sidebar id="multi-sidebar">
    <x-fwb.sidebar.item href="#" :active="true" fwb-icon="s-home">Dashboard</x-fwb.sidebar.item>
    <x-fwb.sidebar.group label="E-commerce" id="ecommerce-dropdown" fwb-icon="o-cart">
        <x-fwb.sidebar.item href="#">Products</x-fwb.sidebar.item>
        <x-fwb.sidebar.item href="#">Billing</x-fwb.sidebar.item>
        <x-fwb.sidebar.item href="#">Invoice</x-fwb.sidebar.item>
    </x-fwb.sidebar.group>
    <x-fwb.sidebar.item href="#" fwb-icon="o-inbox">Inbox</x-fwb.sidebar.item>
    <x-fwb.sidebar.item href="#" fwb-icon="o-users">Users</x-fwb.sidebar.item>
</x-fwb.sidebar>

Content Separator

Blade code

<x-fwb.sidebar id="separator-sidebar">
    <x-fwb.sidebar.item href="#" :active="true" fwb-icon="s-home">Dashboard</x-fwb.sidebar.item>
    <x-fwb.sidebar.item href="#" fwb-icon="o-grid">Kanban</x-fwb.sidebar.item>
    <x-fwb.sidebar.item href="#" badge="3" fwb-icon="o-inbox">Inbox</x-fwb.sidebar.item>
    <li class="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4"></li>
    <x-fwb.sidebar.item href="#" fwb-icon="o-book-open">Documentation</x-fwb.sidebar.item>
    <x-fwb.sidebar.item href="#" fwb-icon="o-question-circle">Help</x-fwb.sidebar.item>
</x-fwb.sidebar>

Logo Branding

Blade code

<x-fwb.sidebar id="logo-sidebar">
    <x-slot:logo>
        <a href="#" class="flex items-center ps-2.5 mb-5">
            <img src="https://flowbite.com/docs/images/logo.svg" class="h-6 me-3 sm:h-7" alt="Flowbite Logo" />
            <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
        </a>
    </x-slot:logo>
    <x-fwb.sidebar.item href="#" :active="true" fwb-icon="s-home">Dashboard</x-fwb.sidebar.item>
    <x-fwb.sidebar.item href="#" fwb-icon="o-grid">Kanban</x-fwb.sidebar.item>
    <x-fwb.sidebar.item href="#" fwb-icon="o-inbox">Inbox</x-fwb.sidebar.item>
</x-fwb.sidebar>

CTA Button

Blade code

<x-fwb.sidebar id="cta-sidebar">
    <x-fwb.sidebar.item href="#" :active="true" fwb-icon="s-home">Dashboard</x-fwb.sidebar.item>
    <x-fwb.sidebar.item href="#" fwb-icon="o-grid">Kanban</x-fwb.sidebar.item>
    <x-slot:cta>
        <div id="dropdown-cta" class="p-4 mt-6 rounded-lg bg-blue-50 dark:bg-blue-900" role="alert">
            <div class="flex items-center mb-3">
                <span class="bg-blue-100 text-blue-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded-sm dark:bg-blue-200 dark:text-blue-900">Beta</span>
                <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-blue-50 inline-flex justify-center items-center w-6 h-6 text-blue-900 rounded-lg focus:ring-2 focus:ring-blue-400 p-1 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-800" aria-label="Close">
                    <span class="sr-only">Close</span>
                    <x-fwb-o-close class="w-2.5 h-2.5" />
                </button>
            </div>
            <p class="mb-3 text-sm text-blue-800 dark:text-blue-400">Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.</p>
            <a class="text-sm text-blue-800 underline font-medium hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" href="#">Turn new navigation off</a>
        </div>
    </x-slot:cta>
</x-fwb.sidebar>

Component Properties

Sidebar x-fwb.sidebar

Prop Type Default Description
id string auto Unique identifier for the sidebar element. Auto-generated if not provided.
logo slot - Named slot for a logo/brand section displayed above the menu items.
cta slot - Named slot for a call-to-action banner displayed below the menu items.

Sidebar Item x-fwb.sidebar.item

Prop Type Default Description
href string # URL for the sidebar item link.
active bool false Highlight the item as the current active page.
badge string|null null Display a badge label next to the item text.
badgeColor string|null null Badge color variant: blue, gray, or default.
fwb-icon string|null null Shorthand icon name from flowbite-blade-icons (e.g. s-home). Renders with default sidebar icon classes.
icon slot — Named slot for full icon control. Takes priority over fwb-icon prop.

Sidebar Group x-fwb.sidebar.group

Prop Type Default Description
id string auto Unique identifier for the collapsible dropdown. Auto-generated if not provided.
label string '' Display text for the dropdown toggle button.
fwb-icon string|null null Shorthand icon name from flowbite-blade-icons (e.g. o-cart). Renders with default sidebar icon classes.
icon slot — Named slot for full icon control. Takes priority over fwb-icon prop.