Icon Sidebar
A compact sidebar that shows only icons, ideal for collapsed states.
Sidebar
Tooltip
Avatar
Separator
Preview
Code
<BbSidebarProvider Collapsible="true" DefaultOpen="false">
<BbSidebar>
<BbSidebarHeader>
<div class="flex h-8 w-8 items-center justify-center rounded-md bg-primary text-primary-foreground mx-auto">
<LucideIcon Name="triangle" class="h-4 w-4" />
</div>
</BbSidebarHeader>
<BbSidebarContent>
<BbSidebarGroup>
<BbSidebarMenu>
<BbSidebarMenuItem>
<BbTooltip>
<BbTooltipTrigger>
<BbSidebarMenuButton Href="/" IsActive="true">
<LucideIcon Name="house" class="h-4 w-4" />
<span>Home</span>
</BbSidebarMenuButton>
</BbTooltipTrigger>
<BbTooltipContent Side="PopoverSide.Right">
<p>Home</p>
</BbTooltipContent>
</BbTooltip>
</BbSidebarMenuItem>
<BbSidebarMenuItem>
<BbTooltip>
<BbTooltipTrigger>
<BbSidebarMenuButton Href="/inbox">
<LucideIcon Name="inbox" class="h-4 w-4" />
<span>Inbox</span>
</BbSidebarMenuButton>
</BbTooltipTrigger>
<BbTooltipContent Side="PopoverSide.Right">
<p>Inbox</p>
</BbTooltipContent>
</BbTooltip>
</BbSidebarMenuItem>
<!-- More items... -->
</BbSidebarMenu>
</BbSidebarGroup>
</BbSidebarContent>
<BbSidebarFooter>
<BbAvatar Size="AvatarSize.Small" Class="mx-auto">
<BbAvatarFallback>KL</BbAvatarFallback>
</BbAvatar>
</BbSidebarFooter>
</BbSidebar>
<BbSidebarInset>
<!-- Your content here -->
</BbSidebarInset>
</BbSidebarProvider>