Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add sidebar

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Pro Component — This component requires an Aura UI Pro license.

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.

Basic Usage

<div class="h-72 overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
    <x-aura::sidebar>
        <x-aura::sidebar.brand>
            <x-aura::icon name="star" class="h-6 w-6 text-violet-500" />
            <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="#" active />
            <x-aura::sidebar.item icon="users" label="Customers" href="#" badge="12" />
            <x-aura::sidebar.item icon="folder" label="Projects" href="#" />
        </x-aura::sidebar.section>

        <x-aura::sidebar.section title="Settings">
            <x-aura::sidebar.item icon="settings" label="General" href="#" />
        </x-aura::sidebar.section>
    </x-aura::sidebar>
</div>
<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>

Props

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

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

Prop Type Default Description
title string '' Section heading text displayed above the group of items.
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.
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.

Examples

Admin Panel Sidebar

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

    <x-aura::sidebar.section title="Overview">
        <x-aura::sidebar.item
            icon="home"
            label="Dashboard"
            href="/admin/dashboard"
            :active="request()->routeIs('admin.dashboard')"
        />
        <x-aura::sidebar.item
            icon="chart-bar"
            label="Analytics"
            href="/admin/analytics"
            :active="request()->routeIs('admin.analytics')"
        />
    </x-aura::sidebar.section>

    <x-aura::sidebar.section title="Management">
        <x-aura::sidebar.item
            icon="users"
            label="Users"
            href="/admin/users"
            :active="request()->routeIs('admin.users.*')"
            badge="128"
        />
        <x-aura::sidebar.item
            icon="shopping-cart"
            label="Orders"
            href="/admin/orders"
            :active="request()->routeIs('admin.orders.*')"
            badge="5"
        />
        <x-aura::sidebar.item
            icon="package"
            label="Products"
            href="/admin/products"
            :active="request()->routeIs('admin.products.*')"
        />
    </x-aura::sidebar.section>

    <x-aura::sidebar.section title="Settings">
        <x-aura::sidebar.item
            icon="settings"
            label="General"
            href="/admin/settings"
            :active="request()->routeIs('admin.settings')"
        />
        <x-aura::sidebar.item
            icon="shield"
            label="Security"
            href="/admin/security"
        />
    </x-aura::sidebar.section>
</x-aura::sidebar>

With Nested Sub-Items

<x-aura::sidebar>
    <x-aura::sidebar.brand>
        <span class="text-lg font-bold">CRM</span>
    </x-aura::sidebar.brand>

    <x-aura::sidebar.section title="Sales">
        <x-aura::sidebar.item icon="briefcase" label="Deals" href="/deals" />
        <x-aura::sidebar.item icon="users" label="Contacts">
            <x-aura::sidebar.sub-item label="All Contacts" href="/contacts" :active="request()->is('contacts')" />
            <x-aura::sidebar.sub-item label="Companies" href="/companies" :active="request()->is('companies')" />
            <x-aura::sidebar.sub-item label="Import" href="/contacts/import" />
        </x-aura::sidebar.item>
        <x-aura::sidebar.item icon="file-text" label="Invoices">
            <x-aura::sidebar.sub-item label="All Invoices" href="/invoices" />
            <x-aura::sidebar.sub-item label="Drafts" href="/invoices?status=draft" />
            <x-aura::sidebar.sub-item label="Overdue" href="/invoices?status=overdue" />
        </x-aura::sidebar.item>
    </x-aura::sidebar.section>
</x-aura::sidebar>

With Badges for Notifications

<x-aura::sidebar.section title="Communication">
    <x-aura::sidebar.item
        icon="inbox"
        label="Inbox"
        href="/inbox"
        :badge="$unreadCount"
        :active="request()->routeIs('inbox.*')"
    />
    <x-aura::sidebar.item
        icon="bell"
        label="Notifications"
        href="/notifications"
        :badge="$notificationCount > 0 ? $notificationCount : null"
    />
    <x-aura::sidebar.item
        icon="message-circle"
        label="Messages"
        href="/messages"
    />
</x-aura::sidebar.section>

Using in a Layout

<!-- resources/views/layouts/app.blade.php -->
<div class="flex min-h-screen">
    <x-aura::sidebar>
        <x-aura::sidebar.brand>
            <img src="/logo.svg" alt="App" class="h-8" />
            <span class="font-bold">MyApp</span>
        </x-aura::sidebar.brand>

        <x-aura::sidebar.section title="Menu">
            <x-aura::sidebar.item icon="home" label="Home" href="/" :active="request()->is('/')" />
            <x-aura::sidebar.item icon="folder" label="Projects" href="/projects" :active="request()->is('projects*')" />
            <x-aura::sidebar.item icon="calendar" label="Schedule" href="/schedule" />
        </x-aura::sidebar.section>
    </x-aura::sidebar>

    <main class="flex-1 p-6">
        {{ $slot }}
    </main>
</div>

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.

Live Demo

Dashboard

You navigated to the dashboard section. Click items in the sidebar to switch views.

Accessibility

  • The sidebar uses <nav> with aria-label="Main Navigation".
  • Section headings use role="heading" and visually separate navigation groups.
  • Active items are indicated with aria-current="page".
  • Collapsible sub-item groups use aria-expanded to reflect open/closed state.
  • Items with sub-items act as disclosure buttons that toggle child visibility.
  • The mobile overlay uses role="dialog" with aria-modal="true" and focus trapping.
  • Escape closes the mobile sidebar overlay.
  • All interactive elements are focusable and navigable via Tab.
  • Badge counts are included in the aria-label of the corresponding item (e.g., "Inbox, 5 unread").