Laravel Navigation Menu Component

Free · MIT

Site navigation with drop-down panels, built as disclosures rather than a menubar.

A Navigation Menu built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::navigation-menu>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::navigation-menu>
    <x-aura::navigation-menu.item title="Product">
        <div class="space-y-1">
            <a href="#" class="block rounded-aura-sm px-2 py-1.5 text-sm hover:bg-aura-surface-100">Components</a>
            <a href="#" class="block rounded-aura-sm px-2 py-1.5 text-sm hover:bg-aura-surface-100">Blocks</a>
            <a href="#" class="block rounded-aura-sm px-2 py-1.5 text-sm hover:bg-aura-surface-100">Theme Studio</a>
        </div>
    </x-aura::navigation-menu.item>

    <x-aura::navigation-menu.item title="Pricing" href="#" />
    <x-aura::navigation-menu.item title="Docs" href="#" active />
</x-aura::navigation-menu>

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

Overview

<x-aura::navigation-menu> is the primary site navigation, with panels for the sections that need more than a link.

Props

Prop	Type	Default	Description
`label`	`string\|null`	`null`	Names the navigation. Defaults to the translated "Primary".

Navigation Menu Item

Prop	Type	Default	Description
`title`	`string`	`''`	The visible label.
`href`	`string\|null`	`null`	Given an `href` the item is a plain link; without one it is a disclosure and the slot becomes its panel.
`active`	`bool`	`false`	Marks the current page.