All blocks

Sidebar

Sidebar blocks.

Navigation shells for products with multiple workspaces and sections.

Sidebar

Workspace sidebar

A persistent product shell with grouped navigation and a user footer.

Sidebar

Avatar

Acme Inc.

Platform

Manage

Sofia Carter

Pro plan

Overview

Welcome back

Select a section from the sidebar to continue.

blade

<april:sidebar-layout class="min-h-[620px] overflow-hidden rounded-xl border">
    <april:sidebar>
        <slot:header><div class="flex items-center gap-2 px-2"><div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground"><x-lucide-layers-3 class="h-4 w-4" /></div><span class="font-semibold">Acme Inc.</span></div></slot:header>
        <slot:content>
            <april:sidebar-group><april:sidebar-group-label>Platform</april:sidebar-group-label><april:sidebar-group-content><april:sidebar-menu>@foreach ([['layout-dashboard', 'Overview'], ['inbox', 'Inbox'], ['calendar', 'Calendar']] as [$icon, $label])<april:sidebar-menu-item><april:sidebar-menu-button-link href="#" :active="$label === 'Overview'"><x-dynamic-component component="lucide-{{$icon}}" /><span>{{$label}}</span>@if ($label === 'Inbox')<april:sidebar-menu-badge>12</april:sidebar-menu-badge>@endif</april:sidebar-menu-button-link></april:sidebar-menu-item>@endforeach</april:sidebar-menu></april:sidebar-group-content></april:sidebar-group>
            <april:sidebar-group><april:sidebar-group-label>Manage</april:sidebar-group-label><april:sidebar-group-content><april:sidebar-menu>@foreach ([['users', 'Team'], ['settings', 'Settings']] as [$icon, $label])<april:sidebar-menu-item><april:sidebar-menu-button-link href="#"><x-dynamic-component component="lucide-{{$icon}}" /><span>{{$label}}</span></april:sidebar-menu-button-link></april:sidebar-menu-item>@endforeach</april:sidebar-menu></april:sidebar-group-content></april:sidebar-group>
        </slot:content>
        <slot:footer><div class="flex items-center gap-2 px-2"><april:avatar><slot:fallback>SC</slot:fallback></april:avatar><div class="min-w-0 flex-1 text-sm"><p class="truncate font-medium">Sofia Carter</p><p class="truncate text-xs text-muted-foreground">Pro plan</p></div><april:button type="button" variant="ghost" size="icon"><x-lucide-settings class="h-4 w-4" /></april:button></div></slot:footer>
    </april:sidebar>
    <april:sidebar-inset class="bg-muted/20"><header class="flex h-14 items-center gap-2 border-b bg-background px-4"><april:sidebar-trigger /><span class="text-sm font-medium">Overview</span></header><div class="p-6"><april:card><slot:title>Welcome back</slot:title><slot:content><p class="text-sm text-muted-foreground">Select a section from the sidebar to continue.</p></slot:content></april:card></div></april:sidebar-inset>
</april:sidebar-layout>

<april:sidebar-layout class="min-h-[620px] overflow-hidden rounded-xl border">
    <april:sidebar>
        <slot:header><div class="flex items-center gap-2 px-2"><div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground"><x-lucide-layers-3 class="h-4 w-4" /></div><span class="font-semibold">Acme Inc.</span></div></slot:header>
        <slot:content>
            <april:sidebar-group><april:sidebar-group-label>Platform</april:sidebar-group-label><april:sidebar-group-content><april:sidebar-menu>@foreach ([['layout-dashboard', 'Overview'], ['inbox', 'Inbox'], ['calendar', 'Calendar']] as [$icon, $label])<april:sidebar-menu-item><april:sidebar-menu-button-link href="#" :active="$label === 'Overview'"><x-dynamic-component component="lucide-{{$icon}}" /><span>{{$label}}</span>@if ($label === 'Inbox')<april:sidebar-menu-badge>12</april:sidebar-menu-badge>@endif</april:sidebar-menu-button-link></april:sidebar-menu-item>@endforeach</april:sidebar-menu></april:sidebar-group-content></april:sidebar-group>
            <april:sidebar-group><april:sidebar-group-label>Manage</april:sidebar-group-label><april:sidebar-group-content><april:sidebar-menu>@foreach ([['users', 'Team'], ['settings', 'Settings']] as [$icon, $label])<april:sidebar-menu-item><april:sidebar-menu-button-link href="#"><x-dynamic-component component="lucide-{{$icon}}" /><span>{{$label}}</span></april:sidebar-menu-button-link></april:sidebar-menu-item>@endforeach</april:sidebar-menu></april:sidebar-group-content></april:sidebar-group>
        </slot:content>
        <slot:footer><div class="flex items-center gap-2 px-2"><april:avatar><slot:fallback>SC</slot:fallback></april:avatar><div class="min-w-0 flex-1 text-sm"><p class="truncate font-medium">Sofia Carter</p><p class="truncate text-xs text-muted-foreground">Pro plan</p></div><april:button type="button" variant="ghost" size="icon"><x-lucide-settings class="h-4 w-4" /></april:button></div></slot:footer>
    </april:sidebar>
    <april:sidebar-inset class="bg-muted/20"><header class="flex h-14 items-center gap-2 border-b bg-background px-4"><april:sidebar-trigger /><span class="text-sm font-medium">Overview</span></header><div class="p-6"><april:card><slot:title>Welcome back</slot:title><slot:content><p class="text-sm text-muted-foreground">Select a section from the sidebar to continue.</p></slot:content></april:card></div></april:sidebar-inset>
</april:sidebar-layout>

Sidebar

Floating sidebar

A floating navigation shell that leaves space around the main content.

Sidebar

Card

Button

Studio

Recent files

Project brief.pdf

Wireframes.fig

Launch notes.md

Getting started

Invite your team and create your first project.

blade

<april:sidebar-layout class="min-h-[620px] overflow-hidden rounded-xl border bg-muted/20">
    <april:sidebar variant="floating" collapsible="icon">
        <slot:header><div class="flex items-center gap-2 px-2"><div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground"><x-lucide-layers-3 class="h-4 w-4" /></div><span class="font-semibold">Studio</span></div></slot:header>
        <slot:content><april:sidebar-group><april:sidebar-group-content><april:sidebar-menu>@foreach ([['layout-dashboard', 'Overview'], ['folder-kanban', 'Projects'], ['users', 'Members'], ['settings', 'Settings']] as [$icon, $label])<april:sidebar-menu-item><april:sidebar-menu-button-link href="#" :active="$label === 'Overview'"><x-dynamic-component component="lucide-{{$icon}}" /><span>{{$label}}</span></april:sidebar-menu-button-link></april:sidebar-menu-item>@endforeach</april:sidebar-menu></april:sidebar-group-content></april:sidebar-group></slot:content>
    </april:sidebar>
    <april:sidebar-inset class="p-4"><div class="flex items-center justify-between"><div class="flex items-center gap-2"><april:sidebar-trigger /><april:breadcrumb><slot:list><april:breadcrumb-item><april:breadcrumb-page>Overview</april:breadcrumb-page></april:breadcrumb-item></slot:list></april:breadcrumb></div><april:button type="button" size="sm">Share</april:button></div><div class="mt-4 grid gap-4 md:grid-cols-2"><april:card><slot:title>Recent files</slot:title><slot:content class="space-y-3">@foreach (['Project brief.pdf', 'Wireframes.fig', 'Launch notes.md'] as $file)<div class="flex items-center gap-3 text-sm"><x-lucide-file-text class="h-4 w-4 text-muted-foreground" /><span>{{$file}}</span></div>@endforeach</slot:content></april:card><april:card><slot:title>Getting started</slot:title><slot:content><p class="text-sm leading-6 text-muted-foreground">Invite your team and create your first project.</p><april:button type="button" size="sm" class="mt-4">Create project</april:button></slot:content></april:card></div></april:sidebar-inset>
</april:sidebar-layout>

<april:sidebar-layout class="min-h-[620px] overflow-hidden rounded-xl border bg-muted/20">
    <april:sidebar variant="floating" collapsible="icon">
        <slot:header><div class="flex items-center gap-2 px-2"><div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground"><x-lucide-layers-3 class="h-4 w-4" /></div><span class="font-semibold">Studio</span></div></slot:header>
        <slot:content><april:sidebar-group><april:sidebar-group-content><april:sidebar-menu>@foreach ([['layout-dashboard', 'Overview'], ['folder-kanban', 'Projects'], ['users', 'Members'], ['settings', 'Settings']] as [$icon, $label])<april:sidebar-menu-item><april:sidebar-menu-button-link href="#" :active="$label === 'Overview'"><x-dynamic-component component="lucide-{{$icon}}" /><span>{{$label}}</span></april:sidebar-menu-button-link></april:sidebar-menu-item>@endforeach</april:sidebar-menu></april:sidebar-group-content></april:sidebar-group></slot:content>
    </april:sidebar>
    <april:sidebar-inset class="p-4"><div class="flex items-center justify-between"><div class="flex items-center gap-2"><april:sidebar-trigger /><april:breadcrumb><slot:list><april:breadcrumb-item><april:breadcrumb-page>Overview</april:breadcrumb-page></april:breadcrumb-item></slot:list></april:breadcrumb></div><april:button type="button" size="sm">Share</april:button></div><div class="mt-4 grid gap-4 md:grid-cols-2"><april:card><slot:title>Recent files</slot:title><slot:content class="space-y-3">@foreach (['Project brief.pdf', 'Wireframes.fig', 'Launch notes.md'] as $file)<div class="flex items-center gap-3 text-sm"><x-lucide-file-text class="h-4 w-4 text-muted-foreground" /><span>{{$file}}</span></div>@endforeach</slot:content></april:card><april:card><slot:title>Getting started</slot:title><slot:content><p class="text-sm leading-6 text-muted-foreground">Invite your team and create your first project.</p><april:button type="button" size="sm" class="mt-4">Create project</april:button></slot:content></april:card></div></april:sidebar-inset>
</april:sidebar-layout>

Sidebar

Collapsible sidebar

A sidebar that can shrink to icons while keeping the page context visible.

Sidebar

Trigger

Northstar

Workspace

Projects

Website refresh

8 tasks · 82% complete

Mobile app

14 tasks · 64% complete

blade

<april:sidebar-layout class="min-h-[620px] overflow-hidden rounded-xl border">
    <april:sidebar collapsible="icon">
        <slot:header><div class="flex items-center gap-2 px-2"><div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground"><x-lucide-layers-3 class="h-4 w-4" /></div><span class="font-semibold">Northstar</span></div></slot:header>
        <slot:content><april:sidebar-group><april:sidebar-group-label>Workspace</april:sidebar-group-label><april:sidebar-group-content><april:sidebar-menu>@foreach ([['layout-dashboard', 'Overview'], ['inbox', 'Inbox'], ['folder-kanban', 'Projects'], ['users', 'Team']] as [$icon, $label])<april:sidebar-menu-item><april:sidebar-menu-button-link href="#" :active="$label === 'Projects'"><x-dynamic-component component="lucide-{{$icon}}" /><span>{{$label}}</span></april:sidebar-menu-button-link></april:sidebar-menu-item>@endforeach</april:sidebar-menu></april:sidebar-group-content></april:sidebar-group></slot:content>
    </april:sidebar>
    <april:sidebar-inset class="p-4"><div class="flex items-center gap-2"><april:sidebar-trigger /><span class="text-sm font-medium">Projects</span></div><div class="mt-6 grid gap-4 sm:grid-cols-2"><april:card><slot:title>Website refresh</slot:title><slot:content><p class="text-sm text-muted-foreground">8 tasks · 82% complete</p><div class="mt-4 h-2 rounded-full bg-muted"><div class="h-full w-4/5 rounded-full bg-primary"></div></div></slot:content></april:card><april:card><slot:title>Mobile app</slot:title><slot:content><p class="text-sm text-muted-foreground">14 tasks · 64% complete</p><div class="mt-4 h-2 rounded-full bg-muted"><div class="h-full w-3/5 rounded-full bg-chart-2"></div></div></slot:content></april:card></div></april:sidebar-inset>
</april:sidebar-layout>

<april:sidebar-layout class="min-h-[620px] overflow-hidden rounded-xl border">
    <april:sidebar collapsible="icon">
        <slot:header><div class="flex items-center gap-2 px-2"><div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground"><x-lucide-layers-3 class="h-4 w-4" /></div><span class="font-semibold">Northstar</span></div></slot:header>
        <slot:content><april:sidebar-group><april:sidebar-group-label>Workspace</april:sidebar-group-label><april:sidebar-group-content><april:sidebar-menu>@foreach ([['layout-dashboard', 'Overview'], ['inbox', 'Inbox'], ['folder-kanban', 'Projects'], ['users', 'Team']] as [$icon, $label])<april:sidebar-menu-item><april:sidebar-menu-button-link href="#" :active="$label === 'Projects'"><x-dynamic-component component="lucide-{{$icon}}" /><span>{{$label}}</span></april:sidebar-menu-button-link></april:sidebar-menu-item>@endforeach</april:sidebar-menu></april:sidebar-group-content></april:sidebar-group></slot:content>
    </april:sidebar>
    <april:sidebar-inset class="p-4"><div class="flex items-center gap-2"><april:sidebar-trigger /><span class="text-sm font-medium">Projects</span></div><div class="mt-6 grid gap-4 sm:grid-cols-2"><april:card><slot:title>Website refresh</slot:title><slot:content><p class="text-sm text-muted-foreground">8 tasks · 82% complete</p><div class="mt-4 h-2 rounded-full bg-muted"><div class="h-full w-4/5 rounded-full bg-primary"></div></div></slot:content></april:card><april:card><slot:title>Mobile app</slot:title><slot:content><p class="text-sm text-muted-foreground">14 tasks · 64% complete</p><div class="mt-4 h-2 rounded-full bg-muted"><div class="h-full w-3/5 rounded-full bg-chart-2"></div></div></slot:content></april:card></div></april:sidebar-inset>
</april:sidebar-layout>

Sidebar

Inset sidebar

An inset navigation shell with a rounded application content area.

Sidebar

Card

Breadcrumb

blade

<april:sidebar-layout class="min-h-[620px] overflow-hidden rounded-xl border bg-muted/20 p-3">
    <april:sidebar variant="inset" collapsible="none" class="rounded-lg border">
        <slot:header><div class="flex items-center gap-2 px-2"><div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground"><x-lucide-layers-3 class="h-4 w-4" /></div><span class="font-semibold">Acme Inc.</span></div></slot:header>
        <slot:content><april:sidebar-group><april:sidebar-group-label>Navigation</april:sidebar-group-label><april:sidebar-group-content><april:sidebar-menu>@foreach ([['layout-dashboard', 'Overview'], ['calendar', 'Calendar'], ['settings', 'Settings']] as [$icon, $label])<april:sidebar-menu-item><april:sidebar-menu-button-link href="#" :active="$label === 'Calendar'"><x-dynamic-component component="lucide-{{$icon}}" /><span>{{$label}}</span></april:sidebar-menu-button-link></april:sidebar-menu-item>@endforeach</april:sidebar-menu></april:sidebar-group-content></april:sidebar-group></slot:content>
    </april:sidebar>
    <april:sidebar-inset class="p-6"><div class="flex items-center justify-between"><div><p class="text-sm text-muted-foreground">Workspace</p><h2 class="text-xl font-semibold tracking-tight">Calendar</h2></div><april:button type="button" size="sm"><x-lucide-plus class="mr-2 h-4 w-4" />New event</april:button></div><april:card class="mt-5"><slot:title>This week</slot:title><slot:content class="space-y-3">@foreach (['Design review · 09:00', 'Team standup · 11:30', 'Customer call · 15:00'] as $event)<div class="flex items-center gap-3 text-sm"><div class="h-2 w-2 rounded-full bg-primary"></div>{{$event}}</div>@endforeach</slot:content></april:card></april:sidebar-inset>
</april:sidebar-layout>

<april:sidebar-layout class="min-h-[620px] overflow-hidden rounded-xl border bg-muted/20 p-3">
    <april:sidebar variant="inset" collapsible="none" class="rounded-lg border">
        <slot:header><div class="flex items-center gap-2 px-2"><div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground"><x-lucide-layers-3 class="h-4 w-4" /></div><span class="font-semibold">Acme Inc.</span></div></slot:header>
        <slot:content><april:sidebar-group><april:sidebar-group-label>Navigation</april:sidebar-group-label><april:sidebar-group-content><april:sidebar-menu>@foreach ([['layout-dashboard', 'Overview'], ['calendar', 'Calendar'], ['settings', 'Settings']] as [$icon, $label])<april:sidebar-menu-item><april:sidebar-menu-button-link href="#" :active="$label === 'Calendar'"><x-dynamic-component component="lucide-{{$icon}}" /><span>{{$label}}</span></april:sidebar-menu-button-link></april:sidebar-menu-item>@endforeach</april:sidebar-menu></april:sidebar-group-content></april:sidebar-group></slot:content>
    </april:sidebar>
    <april:sidebar-inset class="p-6"><div class="flex items-center justify-between"><div><p class="text-sm text-muted-foreground">Workspace</p><h2 class="text-xl font-semibold tracking-tight">Calendar</h2></div><april:button type="button" size="sm"><x-lucide-plus class="mr-2 h-4 w-4" />New event</april:button></div><april:card class="mt-5"><slot:title>This week</slot:title><slot:content class="space-y-3">@foreach (['Design review · 09:00', 'Team standup · 11:30', 'Customer call · 15:00'] as $event)<div class="flex items-center gap-3 text-sm"><div class="h-2 w-2 rounded-full bg-primary"></div>{{$event}}</div>@endforeach</slot:content></april:card></april:sidebar-inset>
</april:sidebar-layout>