Gumtree UI

Sidebar

A vertical navigation sidebar with optional icons and active state highlighting.

Import

import { Sidebar } from "@gumtree/ui/layout/Sidebar";

Props

PropTypeDefaultDescription
items*SidebarItem[]-Array of navigation items
titlestring-Optional section title

Examples

With Icons

A sidebar with icons and an active item.

<Sidebar
  title="Navigation"
  items={[
    { label: "Repos", href: "#", icon: <Icon name="book-open" size={16} />, active: true },
    { label: "Issues", href: "#", icon: <Icon name="circle-dashed" size={16} /> },
    { label: "PRs", href: "#", icon: <Icon name="git-pull-request" size={16} /> },
  ]}
/>

Without Icons

A simple sidebar without icons.

<Sidebar items={[
  { label: "Dashboard", href: "#", active: true },
  { label: "Settings", href: "#" },
  { label: "Help", href: "#" },
]} />