Laravel Navbar Component

Free · MIT

A responsive top navigation bar with brand, menu items, actions, and mobile drawer support.

A Navbar built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::navbar>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::navbar>
    <x-slot:brand>
        <x-aura::brand name="My App" />
    </x-slot:brand>

    <x-slot:items>
        <x-aura::navbar.item href="/" active>Home</x-aura::navbar.item>
        <x-aura::navbar.item href="/about">About</x-aura::navbar.item>
        <x-aura::navbar.item href="/contact">Contact</x-aura::navbar.item>
    </x-slot:items>

    <x-slot:actions>
        <x-aura::button size="sm">Sign In</x-aura::button>
    </x-slot:actions>

    <x-slot:mobile>
        <x-aura::navbar.item href="/" active>Home</x-aura::navbar.item>
        <x-aura::navbar.item href="/about">About</x-aura::navbar.item>
        <x-aura::navbar.item href="/contact">Contact</x-aura::navbar.item>
    </x-slot:mobile>
</x-aura::navbar>

See the full API, props and live examples in the Navbar documentation.

Overview

The <x-aura::navbar> component provides a responsive horizontal navigation bar. It includes dedicated slots for a brand element, navigation items, action buttons, and a collapsible mobile menu powered by Alpine.js. The navbar supports sticky positioning, glass morphism styling, and a bottom border toggle.

Use navbar for:

Main application navigation
Marketing site headers
Dashboard top bars
Landing page navigation

Props

Navbar

Prop	Type	Default	Description
`sticky`	`bool`	`false`	Stick the navbar to the top of the viewport on scroll
`glass`	`bool`	`false`	Apply glass morphism effect (blurred, semi-transparent background)
`bordered`	`bool`	`true`	Show a bottom border

Navbar Item (`<x-aura::navbar.item>`)

Prop	Type	Default	Description
`href`	`string`	`'#'`	Navigation URL
`active`	`bool`	`false`	Highlight as the current page item

Slots

Navbar

Slot	Description
`brand`	Left-aligned area for logo/brand (typically `<x-aura::brand>`)
`items`	Centered navigation links (hidden on mobile)
`actions`	Right-aligned action buttons (hidden on mobile)
`mobile`	Content displayed in the collapsible mobile drawer