caliper uidocs
DemoSign inGet Pro

Workspace sidebar

Pro

A sidebar with workspace switcher, groups and the signed-in user.

Installs components/ui/workspace-sidebar.tsxDepends on @radix-ui/react-dropdown-menu, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/workspace-sidebar

Home

This week at a glance.

Compared with the previous 7 days
  • Active teams1,2603.1%up, good vs previous period
  • Revenue$42k8.4%up, good vs previous period
Growth against plan
Growth against plan
PointActualPlanEvent
M180100
M2101107
M3111114
M4109121
M5105128
M6112135
M7130142
M8152149
M9166156
M10167163
M11162170
M12165177

When to use #

Use it for

  • The main navigation of an application.

Skip it when

  • A public website.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/workspace-sidebar

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { WorkspaceSidebar } from "@/components/ui/workspace-sidebar"

The worked example comes with Pro

The 28-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

WorkspaceSidebar

component
PropTypeDefaultDescription
workspaces *readonly Workspace[]—
workspaceId *string—
onWorkspaceChange *(id: string) => void—
onCreateWorkspace(() => void)—
groups *readonly WorkspaceNavGroup[]—
activeId *string—
onNavigate *(id: string) => void—
favoritesreadonly string[][]Ids of pinned items.
onToggleFavorite((id: string) => void)—
onSearch(() => void)—
user *{ name: string; email: string; avatar?: string | undefined; }—
userMenureadonly { label: string; onSelect: () => void; destructive?: boolean | undefined; }[]—Menu entries for the user, as [label, action] pairs.
classNamestring—

Accessibility #

It is built on native elements and keeps aria-current, aria-hidden, aria-pressed, aria-label, aria-expanded and aria-labelledby in step with state.

KeyBehaviour
↓Moves to the next item or value.
↑Moves to the previous item or value.
←Moves to the previous item or value.
→Moves to the next item or value.
HomeJumps to the first item or the minimum.
EndJumps to the last item or the maximum.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.