Navbar

A top-level navigation component for site-wide links and actions.

Examples

Automatic Layout

Simplified layout using left, center, right, and mobile slots.

blade

<div class="w-full border border-background-200 dark:border-background-700 rounded-lg relative overflow-hidden"
    style="min-height: 200px;">
    <x-plume::navbar class="absolute top-0 left-0 right-0 w-full">
        <x-slot:left>
            <x-plume::navbar.logo href="#">
                <span class="font-bold text-xl tracking-tight">Plume</span>
            </x-plume::navbar.logo>
        </x-slot:left>

        <x-slot:center>
            <x-plume::navbar.menu>
                <x-plume::navbar.item href="#" active>Home</x-plume::navbar.item>
                <x-plume::navbar.item href="#">Docs</x-plume::navbar.item>
                <x-plume::navbar.item href="#">Components</x-plume::navbar.item>
            </x-plume::navbar.menu>
        </x-slot:center>

        <x-slot:right>
            <x-plume::button size="sm">Get Started</x-plume::button>
        </x-slot:right>

        <x-slot:mobile>
            <x-plume::navbar.mobile-item href="#" active>Home</x-plume::navbar.mobile-item>
            <x-plume::navbar.mobile-item href="#">Docs</x-plume::navbar.mobile-item>
            <x-plume::navbar.mobile-item href="#">Components</x-plume::navbar.mobile-item>
        </x-slot:mobile>
    </x-plume::navbar>
</div>

Sticky Navbar

Sticky behavior with custom mobile icon.

blade

<div class="w-full border border-background-200 dark:border-background-700 rounded-lg relative overflow-hidden"
    style="min-height: 200px;">
    <x-plume::navbar sticky class="absolute top-0 left-0 right-0 w-full"
        mobileIcon="icon-[fluent--list-24-regular]">
        <x-slot:left>
            <x-plume::navbar.logo href="#">Sticky Navbar</x-plume::navbar.logo>
        </x-slot:left>
        <x-slot:right>
            <x-plume::button style="outline" size="sm">Action</x-plume::button>
        </x-slot:right>
        <x-slot:mobile>
            <x-plume::navbar.mobile-item href="#">Action</x-plume::navbar.mobile-item>
        </x-slot:mobile>
    </x-plume::navbar>
</div>

With User Dropdown

Combining Navbar with Dropdown for user profile actions.

blade

<div class="w-full border border-background-200 dark:border-background-700 rounded-lg relative overflow-hidden"
    style="min-height: 200px;">
    <x-plume::navbar class="absolute top-0 left-0 right-0 w-full">
        <x-plume::navbar.logo>App</x-plume::navbar.logo>
        <x-plume::spacer />
        <div class="flex items-center gap-4">
            <x-plume::button style="ghost" shape="round">
                <x-plume::icon i="icon-[fluent--alert-24-regular]" class="size-5" />
            </x-plume::button>
            <x-plume::dropdown align="right">
                <x-slot:trigger>
                    <x-plume::avatar src="https://github.com/shadcn.png" size="sm" />
                </x-slot:trigger>
                <x-plume::dropdown.item>Profile</x-plume::dropdown.item>
                <x-plume::dropdown.item>Settings</x-plume::dropdown.item>
                <x-plume::dropdown.separator />
                <x-plume::dropdown.item>Logout</x-plume::dropdown.item>
            </x-plume::dropdown>
        </div>
    </x-plume::navbar>
</div>

Prop	Type	Default	Description
sticky	bool	false	Whether the navbar should be sticky to the top of the page.
mobileIcon	string	'icon-[fluent--line-horizontal-3-20-regular]'	Iconify class for the mobile menu toggle.

Usage

blade

<x-plume::navbar>
                <div class="flex">
                <x-plume::navbar.logo>Logo</x-plume::navbar.logo>
                <x-plume::navbar.menu>
                <x-plume::navbar.item href="#" active>Home</x-plume::navbar.item>
                </x-plume::navbar.menu>
                </div>
                <x-plume::navbar.mobile-toggle />
                </x-plume::navbar>

                <x-plume::navbar.mobile-menu>
                <x-plume::navbar.mobile-item href="#"
                active>Home</x-plume::navbar.mobile-item>
                </x-plume::navbar.mobile-menu>