Navigation

Application navigation blocks including sidebars, shells, navbars, and dashboard footers for building admin panel layouts.

Default Sidebar Navigation

Blade code

<x-fwb.blocks.application.sidenav />

Sidebar Navigation with Custom Props

Blade code

<x-fwb.blocks.application.sidenav
    brandName="My App"
    brandHref="/dashboard"
    id="custom-sidebar">
    <ul class="space-y-2 font-medium">
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                <span class="ms-3">Custom Item</span>
            </a>
        </li>
    </ul>
</x-fwb.blocks.application.sidenav>

Default Application Shell

Blade code

<x-fwb.blocks.application.shell />

Application Shell with Custom Props

Dashboard Content

Main content goes here.

Blade code

<x-fwb.blocks.application.shell
    brandName="Admin Panel"
    brandHref="/admin"
    sidebarId="admin-sidebar">
    <div class="p-4">
        <h2 class="text-xl font-bold text-gray-900 dark:text-white">Dashboard Content</h2>
        <p class="mt-2 text-gray-500 dark:text-gray-400">Main content goes here.</p>
    </div>
</x-fwb.blocks.application.shell>

Default Dashboard Navbar

Blade code

<x-fwb.blocks.application.navbar />

Dashboard Navbar with Custom Props

Blade code

<x-fwb.blocks.application.navbar
    brandName="My Dashboard"
    brandHref="/home" />

Default Dashboard Footer

Blade code

<x-fwb.blocks.application.dashboard-footer />

Dashboard Footer with Custom Props

Blade code

<x-fwb.blocks.application.dashboard-footer
    brandName="My Company"
    brandHref="/about"
    copyright="&copy; 2026 My Company. All Rights Reserved." />

Component Properties

Sidebar Navigation x-fwb.blocks.application.sidenav

PropTypeDefaultDescription
brandName string Flowbite Brand name displayed at the top of the sidebar.
brandHref string / URL for the brand link.
id string default-sidebar The HTML id attribute for the sidebar element.
logo slot - Custom logo replacing the default SVG icon.
slot slot - Custom navigation items replacing the default menu.

Application Shell x-fwb.blocks.application.shell

PropTypeDefaultDescription
brandName string Flowbite Brand name displayed in navbar and sidebar.
brandHref string / URL for the brand link.
sidebarId string logo-sidebar The HTML id for the sidebar element.
navbar slot - Custom navbar replacing the default top navigation bar.
logo slot - Custom logo replacing the default SVG icon in the navbar.
navbarEnd slot - Custom content at the end of the navbar.
sidebar slot - Custom sidebar navigation content.
sidebarBottom slot - Content pinned to the bottom of the sidebar.
content slot - Main content area (alias for default slot).
slot slot - Default slot for the main content area.

Dashboard Navbar x-fwb.blocks.application.navbar

PropTypeDefaultDescription
brandName string Flowbite Brand name displayed in the navbar.
brandHref string / URL for the brand link.
logo slot - Custom logo replacing the default image.
search slot - Custom search form replacing the default search input.
actions slot - Custom actions replacing the default notification, apps, and user menus.

Dashboard Footer x-fwb.blocks.application.dashboard-footer

PropTypeDefaultDescription
brandName string Flowbite Brand name used in the copyright text.
brandHref string / URL for the brand link.
copyright string &copy; {year} Flowbite&trade;... Custom copyright text (supports HTML).
links slot - Custom links replacing the default footer links.
slot slot - Alternative to the links slot for custom footer content.