Sidebar

Modern SaaS application navigation with workspace switcher, search shortcut (⌘K), categorized navigation groups, active indicators, badge pills, collapsible tree, and user profile footer.

<x-sidebar>

Full-featured dashboard sidebar with Workspace Switcher, Quick Search (⌘K), categorized sections, active state highlight, and User Profile footer.

<x-sidebar
    :brand="['name' => 'Veldora HQ', 'plan' => 'Pro Plan', 'logo' => 'V']"
    :search="true"
    :groups="[
        [
            'title' => 'Platform',
            'items' => [
                ['label' => 'Dashboard', 'href' => '/dashboard', 'icon' => 'layout', 'active' => true],
                ['label' => 'Analytics', 'href' => '/analytics', 'icon' => 'activity', 'badge' => 'Live', 'badge_accent' => true],
                ['label' => 'Customers', 'href' => '/customers', 'icon' => 'users', 'badge' => '1.4k'],
            ]
        ],
        [
            'title' => 'Configuration',
            'items' => [
                [
                    'label'    => 'Settings',
                    'icon'     => 'settings',
                    'children' => [
                        ['label' => 'Team Members', 'href' => '/settings/team', 'active' => true],
                        ['label' => 'API Keys', 'href' => '/settings/api'],
                        ['label' => 'Billing', 'href' => '/settings/billing'],
                    ]
                ]
            ]
        ]
    ]"
    :user="['name' => 'Alex Mercer', 'role' => 'alex@veldorahq.dev', 'avatar' => 'AM']"
/>

Space-saving 68px width mini sidebar with centered icons and clean profile footer.

<x-sidebar :collapsed="true" :items="$navItems" :user="$user" />

Toggle sidebar width dynamically between full 260px and compact 68px mode.

<x-sidebar :brand="['name' => 'Veldora Studio', 'plan' => 'Enterprise']" :items="$navItems" />

← Previous Stepper Next → Modal

Sidebar

Modern SaaS Application Sidebar

Compact Icon-Only Collapsed Sidebar

Interactive Live Collapse & Expand Demo