Navbar

Lightweight, sticky application navigation bars with brand logos, inline links, and action triggers.

Component Syntax

blade

<x-aura::navbar>
    <x-slot:brandSlot>
        Logo
    </x-slot:brandSlot>

    <x-slot:navigation>
        Links
    </x-slot:navigation>

    <x-slot:actions>
        Actions
    </x-slot:actions>
</x-aura::navbar>

1. Workspace Navbar

blade

Aura Wire

<x-aura::navbar variant="bordered">

    <x-slot:brandSlot>

        <x-aura::flex align="center" gap="2.5">

            <x-aura::icon name="sparkles" size="sm" variant="dark" shape="sm" />

            <x-aura::heading level="2" size="xs" weight="bold">
                Aura Wire
            </x-aura::heading>

        </x-aura::flex>

    </x-slot:brandSlot>

    <x-slot:navigation>

        <x-aura::header.item href="#" active>
            Overview
        </x-aura::header.item>

        <x-aura::header.item href="#">
            Projects
        </x-aura::header.item>

        <x-aura::header.item href="#">
            Analytics
        </x-aura::header.item>

    </x-slot:navigation>

    <x-slot:actions>

        <x-aura::button variant="primary" size="sm">
            Create
        </x-aura::button>

    </x-slot:actions>

</x-aura::navbar>

Component Props

Available properties and configurations for the navbar component.

Prop	Default	Available Values
variant	default	default dark minimal bordered
brand	null	Brand name string or brandSlot

Aura Wire

Component Library

Navbar

Component Syntax

1. Workspace Navbar

Aura Wire

Component Props

Header

Sidebar

Aura Wire