Sidebar

A collapsible app sidebar with icons and badges.

SidebarProps packages/core/src/advanced-controls.ts:263 ↗

Import

import { Sidebar } from "@tarve/core";

Usage

Sidebar.tsx

import { Badge, Sidebar, Text } from "@tarve/core";

let page = "inbox";
let collapsed = false;

<Sidebar
  value={page}
  collapsed={collapsed}
  header={<Text weight={700}>Acme</Text>}
  items={[
    { value: "inbox", label: "Inbox", icon: "mail", badge: <Badge>4</Badge> },
    { value: "starred", label: "Starred", icon: "star" },
    { value: "settings", label: "Settings", icon: "settings" },
  ]}
  onValueChange={(value) => {
    page = value;
  }}
  onCollapsedChange={(value) => {
    collapsed = value;
  }}
/>

Props

Prop	Type	Default
`items` required	`readonly SidebarItem[]`	—
`collapsed`	`boolean`	`false`
`collapsedWidth`	`number`	`64`
`footer`	`Child`	—
`header`	`Child`	—
`onCollapsedChange`	`(collapsed: boolean) => void`	—
`onValueChange`	`(value: string) => void`	—
`value`	`string`	—
`width`	`number`	`248`

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

SidebarItem

interface SidebarItem {
  value: string;
  label: string;
  icon?: IconName;
  disabled?: boolean;
  badge?: Child;
}