Kaapi UI
← Back to Design System

Sidebar Navigation

Flexible sidebar navigation components with multiple layout options for different use cases.

Simple Sidebar

A standard vertical sidebar with collapsible sub-navigation items and footer actions.

Dashboard Overview

Welcome to the simulated content area.

Main Page Content Area
import { SidebarNavigationSimple } from "@/components/ui/navigation/sidebar-navigation";
import { HomeLine, BarChartSquare02, Users01 } from "@untitled-ui/icons-react";

const items = [
  {
    label: "Home",
    href: "/",
    icon: HomeLine,
    items: [
      { label: "Overview", href: "/overview", icon: Grid03 },
      { label: "Products", href: "/products", icon: Package },
    ],
  },
  {
    label: "Dashboard",
    href: "/dashboard",
    icon: BarChartSquare02,
    items: [
      { label: "Notifications", href: "/notifications", badge: 10 },
    ],
  },
  { label: "Tasks", href: "/tasks", icon: CheckDone01, badge: 10 },
];

<SidebarNavigationSimple
  items={items}
  footerItems={[
    { label: "Settings", href: "/settings", icon: Settings01 },
    { label: "Support", href: "/support", icon: MessageChatCircle },
  ]}
/>

Dual-Tier Sidebar

Two-level navigation with icon-only primary sidebar and expanded secondary navigation panel.

Dashboard Overview (Two-tier)

This content sits next to the dual-tier navigation.

Main Page Content Area
import { SidebarNavigationDualTier } from "@/components/ui/navigation/sidebar-navigation";

<SidebarNavigationDualTier
  items={[
    {
      label: "Home",
      href: "/",
      icon: HomeLine,
      items: [
        { label: "Overview", href: "/overview", icon: Grid03 },
        { label: "Inbox", href: "/inbox", icon: Inbox01, badge: 4 },
      ],
    },
    { label: "Dashboard", href: "/dashboard", icon: BarChartSquare02 },
  ]}
  footerItems={[
    { label: "Support", href: "/support", icon: LifeBuoy01 },
    { label: "Settings", href: "/settings", icon: Settings01 },
  ]}
/>

Slim Sidebar

Compact icon-only sidebar perfect for space-constrained layouts.

Dashboard Overview (Slim)

This content sits next to the slim navigation.

Main Page Content Area
import { SidebarNavigationSlim } from "@/components/ui/navigation/sidebar-navigation";

<SidebarNavigationSlim
  items={[
    { label: "Home", href: "/", icon: HomeLine },
    { label: "Dashboard", href: "/dashboard", icon: BarChartSquare02 },
    { label: "Tasks", href: "/tasks", icon: CheckDone01, badge: 10 },
  ]}
  footerItems={[
    { label: "Support", href: "/support", icon: LifeBuoy01 },
    { label: "Settings", href: "/settings", icon: Settings01 },
  ]}
/>

Sections with Subheadings

Organized navigation with section headers to group related items.

Page Content (Sections)

Content next to the sectioned sidebar.

Main Page Content Area
import { SidebarNavigationSectionsSubheadings } from "@/components/ui/navigation/sidebar-navigation";

const items = [
  {
    label: "General",
    items: [
      { label: "Dashboard", href: "/", icon: BarChartSquare02 },
      { label: "Projects", href: "/projects", icon: Rows01 },
    ],
  },
  {
    label: "Work",
    items: [
      { label: "Tasks", href: "/tasks", icon: CheckDone01, badge: 8 },
      { label: "Users", href: "/users", icon: Users01 },
    ],
  },
];

<SidebarNavigationSectionsSubheadings
  activeUrl="/"
  items={items}
/>

Section Dividers

Navigation with visual dividers to separate different groups of items.

Page Content (Dividers)

Content next to the sidebar with dividers.

Main Page Content Area
import { SidebarNavigationSectionDividers } from "@/components/ui/navigation/sidebar-navigation";

const items = [
  { label: "Home", href: "/", icon: HomeLine },
  { label: "Dashboard", href: "/dashboard", icon: BarChartSquare02 },
  { divider: true },
  {
    label: "Folders",
    icon: Folder,
    href: "/folders",
    items: [
      { label: "View all", badge: 18, href: "/folders/view-all" },
      { label: "Recent", badge: 8, href: "/folders/recent" },
    ],
  },
  { divider: true },
  { label: "Settings", href: "/settings", icon: Settings01 },
];

<SidebarNavigationSectionDividers
  activeUrl="/"
  items={items}
/>

API Reference

PropsTypeDefaultDescription
itemsNavItem[]-Array of navigation items. Each item can have nested subitems.
footerItems?NavItem[]-Optional footer navigation items displayed at the bottom.
activeUrl?string-Current active URL for highlighting the active navigation item.
featureCard?ReactNode-Optional feature card component (e.g., upgrade prompt, usage stats).