Laravel Sidebar Component

Pro

Application sidebar navigation with brand area, collapsible sections, active states, badges, and responsive behavior.

A Sidebar 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::sidebar>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The Sidebar is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

Usage

<x-aura::sidebar>
    <x-aura::sidebar.brand>
        <img src="/logo.svg" alt="Logo" class="h-8" />
        <span class="text-lg font-bold">MyApp</span>
    </x-aura::sidebar.brand>

    <x-aura::sidebar.section title="Main">
        <x-aura::sidebar.item icon="home" label="Dashboard" href="/dashboard" :active="request()->is('dashboard')" />
        <x-aura::sidebar.item icon="users" label="Customers" href="/customers" />
    </x-aura::sidebar.section>
</x-aura::sidebar>

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

Overview

The Sidebar component provides a full navigation panel for application layouts. It includes sub-components for branding, grouped sections, navigation items with icons and badges, and nested sub-items. The sidebar supports collapsible sections, active state highlighting, and responsive behavior that collapses to a mobile-friendly overlay on small screens.

Props

Sidebar

The root component has no configurable props. It manages collapse/expand state internally.

Sidebar Brand

No props. Uses the default slot for custom branding content.

Sidebar Section

Prop	Type	Default	Description
`title`	`string`	`''`	Section heading text displayed above the group of items.

Sidebar Item

Prop	Type	Default	Description
`icon`	`string\|null`	`null`	Heroicon name displayed before the label.
`label`	`string`	`''`	Navigation item text.
`href`	`string\|null`	`null`	URL the item links to.
`active`	`bool`	`false`	Whether this item is the current active page.
`badge`	`string\|int\|null`	`null`	Badge text or count displayed to the right of the label.

Sidebar Sub-Item

Prop	Type	Default	Description
`label`	`string`	`''`	Sub-item text.
`href`	`string\|null`	`null`	URL the sub-item links to.
`active`	`bool`	`false`	Whether this sub-item is the current active page.

Slots

Slot	Component	Description
default	`sidebar`	Contains `sidebar.brand` and `sidebar.section` children.
default	`sidebar.brand`	Custom branding content (logo, app name).
default	`sidebar.section`	Contains `sidebar.item` children.
default	`sidebar.item`	Contains `sidebar.sub-item` children for nested navigation.