Skip to content

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

<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").