Navbar - Laravel Blade

The navbar component can be used to show a list of navigation links positioned on the top side of your page with support for responsive mobile menus, branding, CTA buttons, and more.

Default Navbar

Blade code

<x-fwb.navbar id="default-navbar">
    <x-slot:brand>
        <x-fwb.navbar.brand href="/" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo">
            Flowbite
        </x-fwb.navbar.brand>
    </x-slot:brand>
    <x-fwb.navbar.link href="#" :active="true">Home</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">About</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">Services</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">Pricing</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">Contact</x-fwb.navbar.link>
</x-fwb.navbar>

Navbar with CTA Button

Blade code

<x-fwb.navbar id="cta-navbar">
    <x-slot:brand>
        <x-fwb.navbar.brand href="/" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo">
            Flowbite
        </x-fwb.navbar.brand>
    </x-slot:brand>
    <x-slot:actions>
        <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Get started</button>
    </x-slot:actions>
    <x-fwb.navbar.link href="#" :active="true">Home</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">About</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">Services</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">Pricing</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">Contact</x-fwb.navbar.link>
</x-fwb.navbar>

Rounded Navbar

Blade code

<x-fwb.navbar id="rounded-navbar" :rounded="true" :bordered="true">
    <x-slot:brand>
        <x-fwb.navbar.brand href="/" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo">
            Flowbite
        </x-fwb.navbar.brand>
    </x-slot:brand>
    <x-fwb.navbar.link href="#" :active="true">Home</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">About</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">Services</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">Pricing</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">Contact</x-fwb.navbar.link>
</x-fwb.navbar>

Sticky Navbar

Blade code

<x-fwb.navbar id="sticky-navbar" :sticky="true" :bordered="true">
    <x-slot:brand>
        <x-fwb.navbar.brand href="/" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo">
            Flowbite
        </x-fwb.navbar.brand>
    </x-slot:brand>
    <x-slot:actions>
        <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Get started</button>
    </x-slot:actions>
    <x-fwb.navbar.link href="#" :active="true">Home</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">About</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">Services</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">Pricing</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">Contact</x-fwb.navbar.link>
</x-fwb.navbar>

Navbar with Text Brand

Blade code

<x-fwb.navbar id="brand-navbar">
    <x-slot:brand>
        <x-fwb.navbar.brand href="/">
            Flowbite
        </x-fwb.navbar.brand>
    </x-slot:brand>
    <x-fwb.navbar.link href="#" :active="true">Home</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">About</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">Services</x-fwb.navbar.link>
    <x-fwb.navbar.link href="#">Contact</x-fwb.navbar.link>
</x-fwb.navbar>

Component Properties

Navbar x-fwb.navbar

Prop Type Default Description
id string auto Unique identifier for the navbar. Used for mobile toggle. Auto-generated if not provided.
fluid bool true Use full-width layout. Set to false for a contained width.
rounded bool false Apply rounded corners to the navbar container.
bordered bool false Add a bottom border to the navbar.
sticky bool false Fix the navbar to the top of the viewport on scroll.
brand slot - Named slot for the brand/logo area, typically using x-fwb.navbar.brand.
actions slot - Named slot for action buttons (CTA, search, user menu) placed to the right.

Navbar Brand x-fwb.navbar.brand

Prop Type Default Description
href string / URL the brand links to.
src string|null null URL of the brand logo image.
alt string '' Alt text for the brand logo image.

Navbar Link x-fwb.navbar.link

Prop Type Default Description
href string # URL for the navigation link.
active bool false Mark the link as the current active page.