Floating Sidebar

A sidebar with the floating variant - elevated with shadow and rounded corners.

Sidebar
Avatar
Dropdown Menu
Badge

Preview

Code

<BbSidebarProvider Variant="SidebarVariant.Floating">
    <BbSidebar>
        <BbSidebarHeader>
            <BbDropdownMenu>
                <BbDropdownMenuTrigger>
                    <BbButton Variant="ButtonVariant.Ghost" Class="w-full justify-start gap-2 px-2 h-10">
                        <div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground">
                            <LucideIcon Name="rocket" class="h-4 w-4" />
                        </div>
                        <span class="text-sm font-semibold">LaunchPad</span>
                        <LucideIcon Name="chevrons-up-down" class="ml-auto h-4 w-4 text-muted-foreground" />
                    </BbButton>
                </BbDropdownMenuTrigger>
                <BbDropdownMenuContent MatchTriggerWidth="true">
                    <BbDropdownMenuLabel>Workspaces</BbDropdownMenuLabel>
                    <BbDropdownMenuSeparator />
                    <BbDropdownMenuItem>LaunchPad</BbDropdownMenuItem>
                    <BbDropdownMenuItem>Enterprise</BbDropdownMenuItem>
                    <BbDropdownMenuSeparator />
                    <BbDropdownMenuItem>Create Workspace</BbDropdownMenuItem>
                </BbDropdownMenuContent>
            </BbDropdownMenu>
        </BbSidebarHeader>
        <BbSidebarContent>
            <BbSidebarGroup>
                <BbSidebarMenu>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/dashboard" IsActive="true">
                            <LucideIcon Name="layout-dashboard" class="h-4 w-4" />
                            <span>Dashboard</span>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/projects">
                            <LucideIcon Name="folder-kanban" class="h-4 w-4" />
                            <span>Projects</span>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/tasks">
                            <LucideIcon Name="list-todo" class="h-4 w-4" />
                            <span>Tasks</span>
                            <BbBadge Variant="BadgeVariant.Secondary" Class="ml-auto h-5 px-1.5 text-[10px]">8</BbBadge>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/messages">
                            <LucideIcon Name="message-square" class="h-4 w-4" />
                            <span>Messages</span>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/team">
                            <LucideIcon Name="users" class="h-4 w-4" />
                            <span>Team</span>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                </BbSidebarMenu>
            </BbSidebarGroup>
            <BbSidebarGroup>
                <BbSidebarGroupLabel>Favorites</BbSidebarGroupLabel>
                <BbSidebarMenu>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/projects/launch">
                            <span class="h-2 w-2 rounded-full bg-chart-1 shrink-0"></span>
                            <span>Product Launch</span>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/projects/design">
                            <span class="h-2 w-2 rounded-full bg-chart-2 shrink-0"></span>
                            <span>Design System</span>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                </BbSidebarMenu>
            </BbSidebarGroup>
        </BbSidebarContent>
        <BbSidebarFooter>
            <div class="flex items-center gap-2 px-2 py-2">
                <BbAvatar Size="AvatarSize.Small">
                    <BbAvatarFallback>JD</BbAvatarFallback>
                </BbAvatar>
                <div class="flex flex-col flex-1 min-w-0">
                    <span class="text-sm font-medium truncate">Jane Doe</span>
                    <span class="text-xs text-muted-foreground truncate">[email protected]</span>
                </div>
            </div>
        </BbSidebarFooter>
    </BbSidebar>
    <BbSidebarInset>
        <!-- Your content here -->
    </BbSidebarInset>
</BbSidebarProvider>