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>