Creative Tim UICreative Tim UI

Shadcn Sidebar

PreviousNext

A vertical navigation component with customizable sections, collapsible menus, and action items for organizing application content.

Creative Tim UI
import { Archive, FileText, Mail, Pin, Send, Trash2 } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: Send,
    title: "Sent",
    href: "#",
  },
  {
    icon: FileText,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Trash2,
    title: "Trash",
    href: "#",
  },
]

export function SidebarDemo() {
  return (
    <Card className="w-full max-w-[280px]">
      <CardHeader className="px-4 pt-3 pb-0">
        <h6 className="font-semibold">Creative Tim UI</h6>
      </CardHeader>
      <CardContent className="p-3">
        <nav className="flex flex-col gap-1">
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <a
              key={title}
              href={href}
              className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
            >
              <Icon className="h-[18px] w-[18px]" />
              <span className="flex-1">{title}</span>
              {badge && (
                <Badge variant="secondary" className="ml-auto">
                  {badge}
                </Badge>
              )}
            </a>
          ))}
        </nav>
      </CardContent>
    </Card>
  )
}

Installation

pnpm dlx @creative-tim/ui@latest add sidebar

Usage

import SidebarDemo from "@/components/sidebar-demo"
<SidebarDemo />

Examples

Sidebar Multi-Level

A sidebar with collapsible nested navigation sections to organize related items in a hierarchical structure.

Creative Tim UI
"use client"

import * as React from "react"
import {
  Archive,
  ChevronRight,
  FileText,
  Folder,
  Mail,
  MoreHorizontal,
  Pin,
  Send,
  Trash2,
  UserX,
} from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: Send,
    title: "Sent",
    href: "#",
  },
  {
    icon: FileText,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Trash2,
    title: "Trash",
    href: "#",
  },
]

export function SidebarMultiLevel() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Card className="w-full max-w-[280px]">
      <CardHeader className="px-4 pt-3 pb-0">
        <h6 className="font-semibold">Creative Tim UI</h6>
      </CardHeader>
      <CardContent className="p-3">
        <nav className="flex flex-col gap-1">
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <a
              key={title}
              href={href}
              className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
            >
              <Icon className="h-[18px] w-[18px]" />
              <span className="flex-1">{title}</span>
              {badge && (
                <Badge variant="secondary" className="ml-auto">
                  {badge}
                </Badge>
              )}
            </a>
          ))}

          <Collapsible open={isOpen} onOpenChange={setIsOpen}>
            <CollapsibleTrigger className="hover:bg-muted flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors">
              <MoreHorizontal className="h-[18px] w-[18px]" />
              <span className="flex-1">More</span>
              <ChevronRight
                className={`h-4 w-4 transition-transform ${isOpen ? "rotate-90" : ""}`}
              />
            </CollapsibleTrigger>
            <CollapsibleContent>
              <div className="ml-3 flex flex-col gap-1 border-l pt-1 pl-3">
                <a
                  href="#"
                  className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                >
                  <Folder className="h-[18px] w-[18px]" />
                  <span>Spam</span>
                </a>
                <a
                  href="#"
                  className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                >
                  <UserX className="h-[18px] w-[18px]" />
                  <span>Blocked</span>
                </a>
                <a
                  href="#"
                  className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                >
                  <Folder className="h-[18px] w-[18px]" />
                  <span>Important</span>
                </a>
              </div>
            </CollapsibleContent>
          </Collapsible>
        </nav>
      </CardContent>
    </Card>
  )
}

A sidebar featuring a brand logo, collapsible sections, and a call-to-action card to promote upgrades or features.

Creative Tim UI
Upgrade to PRO

Upgrade to Creative Tim UI PRO and get even more components, plugins, advanced features and premium.

Upgrade Now
"use client"

import * as React from "react"
import {
  Archive,
  ChevronRight,
  FileText,
  Folder,
  Layers,
  LogOut,
  Mail,
  MoreHorizontal,
  Pin,
  Send,
  Sparkles,
  Trash2,
  UserX,
} from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Separator } from "@/components/ui/separator"

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: Send,
    title: "Sent",
    href: "#",
  },
  {
    icon: FileText,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Trash2,
    title: "Trash",
    href: "#",
  },
]

export function SidebarWithLogo() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Card className="w-full max-w-[280px]">
      <CardHeader className="flex-row items-center gap-2 space-y-0 px-3 pt-3 pb-0">
        <div className="bg-primary flex h-7 w-7 items-center justify-center rounded-md">
          <Layers className="text-primary-foreground h-4 w-4" />
        </div>
        <h6 className="font-semibold">Creative Tim UI</h6>
      </CardHeader>
      <CardContent className="p-3">
        <nav className="flex flex-col gap-1">
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <a
              key={title}
              href={href}
              className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
            >
              <Icon className="h-[18px] w-[18px]" />
              <span className="flex-1">{title}</span>
              {badge && (
                <Badge variant="secondary" className="ml-auto">
                  {badge}
                </Badge>
              )}
            </a>
          ))}

          <Separator className="my-3" />

          <Collapsible open={isOpen} onOpenChange={setIsOpen}>
            <CollapsibleTrigger className="hover:bg-muted flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors">
              <MoreHorizontal className="h-[18px] w-[18px]" />
              <span className="flex-1">More</span>
              <ChevronRight
                className={`h-4 w-4 transition-transform ${isOpen ? "rotate-90" : ""}`}
              />
            </CollapsibleTrigger>
            <CollapsibleContent>
              <div className="ml-3 flex flex-col gap-1 border-l pt-1 pl-3">
                <a
                  href="#"
                  className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                >
                  <Folder className="h-[18px] w-[18px]" />
                  <span>Spam</span>
                </a>
                <a
                  href="#"
                  className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                >
                  <UserX className="h-[18px] w-[18px]" />
                  <span>Blocked</span>
                </a>
                <a
                  href="#"
                  className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                >
                  <Folder className="h-[18px] w-[18px]" />
                  <span>Important</span>
                </a>
              </div>
            </CollapsibleContent>
          </Collapsible>

          <Separator className="my-3" />

          <a
            href="#"
            className="text-destructive hover:bg-destructive/10 flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
          >
            <LogOut className="h-[18px] w-[18px]" />
            <span>Logout</span>
          </a>
        </nav>
      </CardContent>
      <CardFooter className="mt-8 flex-col p-4">
        <Card className="bg-primary border-none shadow-none">
          <CardHeader className="p-3">
            <Sparkles className="text-primary-foreground h-10 w-10" />
          </CardHeader>
          <CardContent className="p-3 pt-0">
            <h6 className="text-primary-foreground mb-1 text-base font-semibold">
              Upgrade to PRO
            </h6>
            <p className="text-primary-foreground/80 text-sm">
              Upgrade to Creative Tim UI PRO and get even more components,
              plugins, advanced features and premium.
            </p>
          </CardContent>
          <CardFooter className="p-3 pt-0">
            <Button size="sm" variant="secondary" className="w-full" asChild>
              <a href="#">Upgrade Now</a>
            </Button>
          </CardFooter>
        </Card>
      </CardFooter>
    </Card>
  )
}

Sidebar With Search

A sidebar with an integrated search input field to quickly filter and find navigation items.

Creative Tim UI
Upgrade to PRO

Upgrade to Creative Tim UI PRO and get even more components, plugins, advanced features and premium.

Upgrade Now
"use client"

import * as React from "react"
import {
  Archive,
  ChevronRight,
  FileText,
  Folder,
  Layers,
  LogOut,
  Mail,
  MoreHorizontal,
  Pin,
  Search,
  Send,
  Sparkles,
  Trash2,
  UserX,
} from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: Send,
    title: "Sent",
    href: "#",
  },
  {
    icon: FileText,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Trash2,
    title: "Trash",
    href: "#",
  },
]

export function SidebarWithSearch() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Card className="w-full max-w-[280px]">
      <CardHeader className="flex-row items-center gap-2 space-y-0 px-3 pt-3 pb-0">
        <div className="bg-primary flex h-7 w-7 items-center justify-center rounded-md">
          <Layers className="text-primary-foreground h-4 w-4" />
        </div>
        <h6 className="font-semibold">Creative Tim UI</h6>
      </CardHeader>
      <CardContent className="p-3">
        <div className="relative">
          <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
          <Input type="search" placeholder="Search here..." className="pl-9" />
        </div>

        <nav className="mt-3 flex flex-col gap-1">
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <a
              key={title}
              href={href}
              className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
            >
              <Icon className="h-[18px] w-[18px]" />
              <span className="flex-1">{title}</span>
              {badge && (
                <Badge variant="secondary" className="ml-auto">
                  {badge}
                </Badge>
              )}
            </a>
          ))}

          <Separator className="my-3" />

          <Collapsible open={isOpen} onOpenChange={setIsOpen}>
            <CollapsibleTrigger className="hover:bg-muted flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors">
              <MoreHorizontal className="h-[18px] w-[18px]" />
              <span className="flex-1">More</span>
              <ChevronRight
                className={`h-4 w-4 transition-transform ${isOpen ? "rotate-90" : ""}`}
              />
            </CollapsibleTrigger>
            <CollapsibleContent>
              <div className="ml-3 flex flex-col gap-1 border-l pt-1 pl-3">
                <a
                  href="#"
                  className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                >
                  <Folder className="h-[18px] w-[18px]" />
                  <span>Spam</span>
                </a>
                <a
                  href="#"
                  className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                >
                  <UserX className="h-[18px] w-[18px]" />
                  <span>Blocked</span>
                </a>
                <a
                  href="#"
                  className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                >
                  <Folder className="h-[18px] w-[18px]" />
                  <span>Important</span>
                </a>
              </div>
            </CollapsibleContent>
          </Collapsible>

          <Separator className="my-3" />

          <a
            href="#"
            className="text-destructive hover:bg-destructive/10 flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
          >
            <LogOut className="h-[18px] w-[18px]" />
            <span>Logout</span>
          </a>
        </nav>
      </CardContent>
      <CardFooter className="mt-8 flex-col p-4">
        <Card className="bg-primary border-none shadow-none">
          <CardHeader className="p-3">
            <Sparkles className="text-primary-foreground h-10 w-10" />
          </CardHeader>
          <CardContent className="p-3 pt-0">
            <h6 className="text-primary-foreground mb-1 text-base font-semibold">
              Upgrade to PRO
            </h6>
            <p className="text-primary-foreground/80 text-sm">
              Upgrade to Creative Tim UI PRO and get even more components,
              plugins, advanced features and premium.
            </p>
          </CardContent>
          <CardFooter className="p-3 pt-0">
            <Button size="sm" variant="secondary" className="w-full" asChild>
              <a href="#">Upgrade Now</a>
            </Button>
          </CardFooter>
        </Card>
      </CardFooter>
    </Card>
  )
}

Sidebar With Content Separator

A sidebar that uses visual separators to group related navigation items into distinct sections.

Creative Tim UI
"use client"

import * as React from "react"
import {
  Archive,
  ChevronRight,
  FileText,
  Folder,
  LogOut,
  Mail,
  MoreHorizontal,
  Pin,
  Send,
  Trash2,
  UserX,
} from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Separator } from "@/components/ui/separator"

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: Send,
    title: "Sent",
    href: "#",
  },
  {
    icon: FileText,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Trash2,
    title: "Trash",
    href: "#",
  },
]

export function SidebarWithContentSeparator() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Card className="w-full max-w-[280px]">
      <CardHeader className="px-4 pt-3 pb-0">
        <h6 className="font-semibold">Creative Tim UI</h6>
      </CardHeader>
      <CardContent className="p-3">
        <nav className="flex flex-col gap-1">
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <a
              key={title}
              href={href}
              className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
            >
              <Icon className="h-[18px] w-[18px]" />
              <span className="flex-1">{title}</span>
              {badge && (
                <Badge variant="secondary" className="ml-auto">
                  {badge}
                </Badge>
              )}
            </a>
          ))}

          <Separator className="my-3" />

          <Collapsible open={isOpen} onOpenChange={setIsOpen}>
            <CollapsibleTrigger className="hover:bg-muted flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors">
              <MoreHorizontal className="h-[18px] w-[18px]" />
              <span className="flex-1">More</span>
              <ChevronRight
                className={`h-4 w-4 transition-transform ${isOpen ? "rotate-90" : ""}`}
              />
            </CollapsibleTrigger>
            <CollapsibleContent>
              <div className="ml-3 flex flex-col gap-1 border-l pt-1 pl-3">
                <a
                  href="#"
                  className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                >
                  <Folder className="h-[18px] w-[18px]" />
                  <span>Spam</span>
                </a>
                <a
                  href="#"
                  className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                >
                  <UserX className="h-[18px] w-[18px]" />
                  <span>Blocked</span>
                </a>
                <a
                  href="#"
                  className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                >
                  <Folder className="h-[18px] w-[18px]" />
                  <span>Important</span>
                </a>
              </div>
            </CollapsibleContent>
          </Collapsible>

          <Separator className="my-3" />

          <a
            href="#"
            className="text-destructive hover:bg-destructive/10 flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
          >
            <LogOut className="h-[18px] w-[18px]" />
            <span>Logout</span>
          </a>
        </nav>
      </CardContent>
    </Card>
  )
}

Sidebar With CTA

A sidebar with a prominent call-to-action card at the bottom to encourage user actions like upgrading to a premium tier.

Creative Tim UI
Upgrade to PRO

Upgrade to Creative Tim UI PRO and get even more components, plugins, advanced features and premium.

Upgrade Now
"use client"

import * as React from "react"
import {
  Archive,
  ChevronRight,
  FileText,
  Folder,
  LogOut,
  Mail,
  MoreHorizontal,
  Pin,
  Send,
  Sparkles,
  Trash2,
  UserX,
} from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Separator } from "@/components/ui/separator"

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: Send,
    title: "Sent",
    href: "#",
  },
  {
    icon: FileText,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Trash2,
    title: "Trash",
    href: "#",
  },
]

export function SidebarWithCta() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Card className="w-full max-w-[280px]">
      <CardHeader className="px-4 pt-3 pb-0">
        <h6 className="font-semibold">Creative Tim UI</h6>
      </CardHeader>
      <CardContent className="p-3">
        <nav className="flex flex-col gap-1">
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <a
              key={title}
              href={href}
              className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
            >
              <Icon className="h-[18px] w-[18px]" />
              <span className="flex-1">{title}</span>
              {badge && (
                <Badge variant="secondary" className="ml-auto">
                  {badge}
                </Badge>
              )}
            </a>
          ))}

          <Separator className="my-3" />

          <Collapsible open={isOpen} onOpenChange={setIsOpen}>
            <CollapsibleTrigger className="hover:bg-muted flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors">
              <MoreHorizontal className="h-[18px] w-[18px]" />
              <span className="flex-1">More</span>
              <ChevronRight
                className={`h-4 w-4 transition-transform ${isOpen ? "rotate-90" : ""}`}
              />
            </CollapsibleTrigger>
            <CollapsibleContent>
              <div className="ml-3 flex flex-col gap-1 border-l pt-1 pl-3">
                <a
                  href="#"
                  className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                >
                  <Folder className="h-[18px] w-[18px]" />
                  <span>Spam</span>
                </a>
                <a
                  href="#"
                  className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                >
                  <UserX className="h-[18px] w-[18px]" />
                  <span>Blocked</span>
                </a>
                <a
                  href="#"
                  className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                >
                  <Folder className="h-[18px] w-[18px]" />
                  <span>Important</span>
                </a>
              </div>
            </CollapsibleContent>
          </Collapsible>

          <Separator className="my-3" />

          <a
            href="#"
            className="text-destructive hover:bg-destructive/10 flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
          >
            <LogOut className="h-[18px] w-[18px]" />
            <span>Logout</span>
          </a>
        </nav>
      </CardContent>
      <CardFooter className="mt-8 flex-col p-4">
        <Card className="bg-primary border-none shadow-none">
          <CardHeader className="p-3">
            <Sparkles className="text-primary-foreground h-10 w-10" />
          </CardHeader>
          <CardContent className="p-3 pt-0">
            <h6 className="text-primary-foreground mb-1 text-base font-semibold">
              Upgrade to PRO
            </h6>
            <p className="text-primary-foreground/80 text-sm">
              Upgrade to Creative Tim UI PRO and get even more components,
              plugins, advanced features and premium.
            </p>
          </CardContent>
          <CardFooter className="p-3 pt-0">
            <Button size="sm" variant="secondary" className="w-full" asChild>
              <a href="#">Upgrade Now</a>
            </Button>
          </CardFooter>
        </Card>
      </CardFooter>
    </Card>
  )
}

Sidebar With Burger Menu

A responsive sidebar that opens from a burger menu button, ideal for mobile and compact layouts using a sheet/drawer overlay.

"use client"

import * as React from "react"
import {
  Archive,
  ChevronRight,
  FileText,
  Folder,
  LogOut,
  Mail,
  Menu,
  MoreHorizontal,
  Pin,
  Search,
  Send,
  Sparkles,
  Trash2,
  UserX,
  X,
} from "lucide-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetTrigger,
} from "@/components/ui/sheet"

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: Send,
    title: "Sent",
    href: "#",
  },
  {
    icon: FileText,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Trash2,
    title: "Trash",
    href: "#",
  },
]

export function SidebarWithBurgerMenu() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline" size="icon">
          <Menu className="h-4 w-4" />
          <span className="sr-only">Toggle menu</span>
        </Button>
      </SheetTrigger>
      <SheetContent side="left" className="w-[280px] p-0 sm:w-[280px]">
        <SheetClose className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-2 right-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
          <X className="h-4 w-4" />
          <span className="sr-only">Close</span>
        </SheetClose>

        <div className="flex h-full flex-col">
          <div className="flex-1 overflow-auto">
            <div className="flex items-center gap-2 px-3 pt-3 pb-0">
              <Avatar className="h-7 w-7">
                <AvatarImage
                  src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/ct-assets/logo.png"
                  alt="brand"
                />
                <AvatarFallback>CT</AvatarFallback>
              </Avatar>
              <h6 className="font-semibold">Creative Tim UI</h6>
            </div>

            <div className="p-3">
              <div className="relative">
                <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
                <Input
                  type="search"
                  placeholder="Search here..."
                  className="pl-9"
                />
              </div>

              <nav className="mt-3 flex flex-col gap-1">
                {Links.map(({ icon: Icon, title, href, badge }) => (
                  <a
                    key={title}
                    href={href}
                    className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                  >
                    <Icon className="h-[18px] w-[18px]" />
                    <span className="flex-1">{title}</span>
                    {badge && (
                      <Badge variant="secondary" className="ml-auto">
                        {badge}
                      </Badge>
                    )}
                  </a>
                ))}

                <Separator className="my-3" />

                <Collapsible open={isOpen} onOpenChange={setIsOpen}>
                  <CollapsibleTrigger className="hover:bg-muted flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors">
                    <MoreHorizontal className="h-[18px] w-[18px]" />
                    <span className="flex-1">More</span>
                    <ChevronRight
                      className={`h-4 w-4 transition-transform ${isOpen ? "rotate-90" : ""}`}
                    />
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <div className="ml-3 flex flex-col gap-1 border-l pt-1 pl-3">
                      <a
                        href="#"
                        className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                      >
                        <Folder className="h-[18px] w-[18px]" />
                        <span>Spam</span>
                      </a>
                      <a
                        href="#"
                        className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                      >
                        <UserX className="h-[18px] w-[18px]" />
                        <span>Blocked</span>
                      </a>
                      <a
                        href="#"
                        className="hover:bg-muted flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                      >
                        <Folder className="h-[18px] w-[18px]" />
                        <span>Important</span>
                      </a>
                    </div>
                  </CollapsibleContent>
                </Collapsible>

                <Separator className="my-3" />

                <a
                  href="#"
                  className="text-destructive hover:bg-destructive/10 flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
                >
                  <LogOut className="h-[18px] w-[18px]" />
                  <span>Logout</span>
                </a>
              </nav>
            </div>
          </div>

          <div className="mt-auto">
            <Card className="bg-primary m-3 border-none shadow-none">
              <CardHeader className="p-3">
                <Sparkles className="text-primary-foreground h-10 w-10" />
              </CardHeader>
              <CardContent className="p-3 pt-0">
                <h6 className="text-primary-foreground mb-1 text-base font-semibold">
                  Upgrade to PRO
                </h6>
                <p className="text-primary-foreground/80 text-sm">
                  Upgrade to Creative Tim UI PRO and get even more components,
                  plugins, advanced features and premium.
                </p>
              </CardContent>
              <CardFooter className="p-3 pt-0">
                <Button
                  size="sm"
                  variant="secondary"
                  className="w-full"
                  asChild
                >
                  <a href="#">Upgrade Now</a>
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </SheetContent>
    </Sheet>
  )
}

Props

The sidebar component is highly customizable through its composition. Here are the key props for the underlying components:

Navigation Link

PropTypeDefaultDescription
hrefstring-The URL to navigate to when clicked
iconLucideIcon-Icon component to display before the label
badgenumber | string-Badge content to display (e.g., notification count)

Collapsible Section

PropTypeDefaultDescription
openbooleanfalseControls whether the section is expanded or collapsed
onOpenChange(open: boolean) => void-Callback fired when the open state changes

Sheet/Drawer (Burger Menu)

PropTypeDefaultDescription
side"left" | "right" | "top" | "bottom""left"The side from which the drawer slides in
classNamestring-Additional CSS classes for custom styling

The sidebar examples use shadcn/ui components including Card, Badge, Avatar, Collapsible, Button, Input, Separator, and Sheet for maximum flexibility and customization. You can modify the styling, add new sections, or integrate additional components to match your application's design system.