Skip to Content
BlocksSidebar

Sidebar Block

The sidebar block provides a complete navigation sidebar with grouped links, collapsible sections, a user menu, and responsive behavior. It is the standard navigation pattern for Mukoko dashboard and admin interfaces.

Required components

npx shadcn@latest add \
  https://registry.mukoko.com/api/v1/ui/sidebar \
  https://registry.mukoko.com/api/v1/ui/avatar \
  https://registry.mukoko.com/api/v1/ui/dropdown-menu \
  https://registry.mukoko.com/api/v1/ui/collapsible \
  https://registry.mukoko.com/api/v1/ui/separator

Basic sidebar

import {
  Sidebar, SidebarContent, SidebarFooter, SidebarGroup,
  SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuItem,
  SidebarMenuButton, SidebarProvider, SidebarInset, SidebarTrigger,
} from "@/components/ui/sidebar"
import { Home, Calendar, BarChart3, Settings, User } from "lucide-react"
 
<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <MukokoLogo size={24} suffix="weather" />
    </SidebarHeader>
 
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Main</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton isActive>
              <Home className="size-4" />
              Dashboard
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton>
              <Calendar className="size-4" />
              Events
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton>
              <BarChart3 className="size-4" />
              Analytics
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
 
      <SidebarGroup>
        <SidebarGroupLabel>Settings</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton>
              <Settings className="size-4" />
              Preferences
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
 
    <SidebarFooter>
      {/* User section */}
    </SidebarFooter>
  </Sidebar>
 
  <SidebarInset>
    <header className="flex h-14 items-center gap-2 border-b border-border px-4">
      <SidebarTrigger />
      <h1 className="text-sm font-medium">Dashboard</h1>
    </header>
    <main className="p-4 sm:p-6">
      {/* Page content */}
    </main>
  </SidebarInset>
</SidebarProvider>

Collapsible sub-menus

For nested navigation, use SidebarMenuSub:

<SidebarMenuItem>
  <Collapsible>
    <CollapsibleTrigger asChild>
      <SidebarMenuButton>
        <BarChart3 className="size-4" />
        Analytics
        <ChevronDown className="ml-auto size-4" />
      </SidebarMenuButton>
    </CollapsibleTrigger>
    <CollapsibleContent>
      <SidebarMenuSub>
        <SidebarMenuSubItem>
          <SidebarMenuSubButton>Overview</SidebarMenuSubButton>
        </SidebarMenuSubItem>
        <SidebarMenuSubItem>
          <SidebarMenuSubButton>Reports</SidebarMenuSubButton>
        </SidebarMenuSubItem>
        <SidebarMenuSubItem>
          <SidebarMenuSubButton>Exports</SidebarMenuSubButton>
        </SidebarMenuSubItem>
      </SidebarMenuSub>
    </CollapsibleContent>
  </Collapsible>
</SidebarMenuItem>
<SidebarFooter>
  <SidebarMenu>
    <SidebarMenuItem>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <SidebarMenuButton className="h-12">
            <Avatar className="size-6">
              <AvatarFallback>TM</AvatarFallback>
            </Avatar>
            <div className="flex flex-col">
              <span className="text-sm font-medium">Tendai Moyo</span>
              <span className="text-xs text-muted-foreground">tendai@mukoko.com</span>
            </div>
          </SidebarMenuButton>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start" className="w-56">
          <DropdownMenuItem>Profile</DropdownMenuItem>
          <DropdownMenuItem>Settings</DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem>Sign out</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </SidebarMenuItem>
  </SidebarMenu>
</SidebarFooter>

With badge counts

Show notification counts on menu items:

<SidebarMenuItem>
  <SidebarMenuButton>
    <Bell className="size-4" />
    Notifications
  </SidebarMenuButton>
  <SidebarMenuBadge>12</SidebarMenuBadge>
</SidebarMenuItem>

Responsive behavior

The SidebarProvider handles responsive behavior automatically:

  • Desktop (md+): sidebar is persistent and visible
  • Mobile: sidebar is hidden behind the SidebarTrigger button, slides in as an overlay

The SidebarTrigger component renders a hamburger menu button that toggles the sidebar on mobile. Place it in the main content header.

Mukoko sidebar

For Mukoko ecosystem apps, use the pre-built MukokoSidebar component:

import { MukokoSidebar } from "@/components/mukoko/mukoko-sidebar"
 
<SidebarProvider>
  <MukokoSidebar appName="weather" />
  <SidebarInset>{/* Content */}</SidebarInset>
</SidebarProvider>

This includes the standard Mukoko branding, navigation structure, and mineral strip accent.

Last updated on
Authentication