Skip to content

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

Basic 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>

Props

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
Prop Type Default Description
href string '#' Navigation URL
active bool false Highlight as the current page item

Slots

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
Slot Description
Default The link label text

Variants / Examples

Sticky with Glass Effect

<x-aura::navbar sticky glass>
    <x-slot:brand>
        <x-aura::brand logo="/images/logo.svg" name="Acme" />
    </x-slot:brand>

    <x-slot:items>
        <x-aura::navbar.item href="/features">Features</x-aura::navbar.item>
        <x-aura::navbar.item href="/pricing">Pricing</x-aura::navbar.item>
        <x-aura::navbar.item href="/docs">Docs</x-aura::navbar.item>
    </x-slot:items>

    <x-slot:actions>
        <x-aura::button variant="ghost" size="sm">Log In</x-aura::button>
        <x-aura::button size="sm">Get Started</x-aura::button>
    </x-slot:actions>

    <x-slot:mobile>
        <x-aura::navbar.item href="/features">Features</x-aura::navbar.item>
        <x-aura::navbar.item href="/pricing">Pricing</x-aura::navbar.item>
        <x-aura::navbar.item href="/docs">Docs</x-aura::navbar.item>
    </x-slot:mobile>
</x-aura::navbar>

Without Border

<x-aura::navbar :bordered="false">
    <x-slot:brand>
        <x-aura::brand name="Dashboard" />
    </x-slot:brand>
    <x-slot:items>
        <x-aura::navbar.item href="/overview" active>Overview</x-aura::navbar.item>
        <x-aura::navbar.item href="/analytics">Analytics</x-aura::navbar.item>
    </x-slot:items>
</x-aura::navbar>

Active State

Dashboard Settings 
<x-aura::navbar.item href="/dashboard" active>Dashboard</x-aura::navbar.item>
<x-aura::navbar.item href="/settings">Settings</x-aura::navbar.item>

The active item receives a primary color background and text, with aria-current="page" applied automatically.

Accessibility

  • The navbar renders as a <nav> element for proper landmark navigation.
  • The mobile hamburger toggle includes aria-label="Toggle navigation" and dynamically binds aria-expanded to reflect the menu state.
  • Active navbar items include aria-current="page" to indicate the current page to screen readers.
  • The mobile menu uses x-collapse for smooth expand/collapse animation and x-cloak to prevent flash of content.
  • Pressing the hamburger button toggles mobileOpen, switching between a menu icon and a close (x) icon.