Sidebar

The sidebar component is used to create a sidebar navigation.

Open in new tab

/* sidebar-layout.blade.php */

<div class="min-h-screen lg:flex">
    
    <x-sidebar>
        
        <div class="flex items-center mb-5 px-2">
            
            <x-application-logo class="h-5 w-5 text-red-500" />
                
            <x-text class="pl-2" color="none" size="none" content="Example App" />
        </div>
            
        <x-sidebar-item :href="route('changelog')">
            
            <x-sidebar-icon component="radix-person" />
                
            <x-text color="none" size="none" content="Home" />
        </x-sidebar-item>
            
        <x-sidebar-item :href="route('changelog')">
            
            <x-sidebar-icon component="radix-person" />
                
            <x-text color="none" size="none" content="Users" />
        </x-sidebar-item>
            
        <x-sidebar-item :href="route('changelog')">
            
            <x-sidebar-icon component="radix-envelope-closed" />
                
            <x-text color="none" size="none" content="Messages" />
        </x-sidebar-item>
    </x-sidebar>
        
    <div class="flex-grow flex flex-col">
        
        <main class="flex-grow p-2 overflow-auto">
            
            <x-card class="h-full">
                
                <x-title size="2xl" class="mb-2" content="Dashboard" />
                    
                <x-divider class="my-4" />
            </x-card>
        </main>
    </div>
</div>

Component API

Sidebar

Sidebar Item