• Docs
  • Components
  • Blocks
  • Admin
CtrlK
Get Started
  • Introduction
  • Setup
  • CLI
  • VS Code Extension
  • Figma Code Connect
  • MCP Server
  • llms.txt
  • Changelog
Foundations
  • Design Tokens
  • Theming & Modes
  • Semantic Colors
  • Spacing
  • Typography
Testing
  • Test Guide
  • Performance Tests
  • Visual Regression
Components
  • Accordion
  • Activity Feed
  • Alert
  • Avatar
  • Badge
  • Breadcrumbs
  • Button
  • Card
  • Carousel
  • Checkbox
  • Collapsible
  • Combobox
  • Command Palette
  • Context Menu
  • Date Picker
  • Dialog
  • Dropdown Menu
  • File Upload
  • Hover Card
  • Input
  • Kbd
  • Label
  • Menubar
  • Metric Card
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Quick Actions
  • Radio
  • Rating
  • Resizable
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Skeleton
  • Slider
  • Spinner
  • Split Button
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree View
Blocks
  • Activity Feed
  • App Shell
  • Authentication Block
  • Benefits Section
  • Cta Section
  • Data Table
  • Empty State
  • Faq Section
  • Feature Grid Section
  • Footer Section
  • Hero Section
  • Kpi Dashboard
  • Kpi Strip
  • Link Card
  • Metric Card
  • Navigation Header
  • Pagination Footer
  • Pricing Table
  • Quick Actions
  • Settings Screen
Resources
  • API Reference

DocumentationSidebar

Sidebar navigation component for documentation sites with scroll detection, wheel handling, and active state detection.

Features

  • Scroll detection (detects when main content is at bottom)
  • Wheel handling (redirects wheel events to sidebar when at bottom)
  • Responsive (hidden on mobile, uses Sheet for mobile menu)
  • Active state detection based on current path
  • Collapsible sections
  • Nested navigation items
  • Configurable LinkComponent (Next.js, React Router, etc.)

Installation

1

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

API Reference

DocumentationSidebarProps

PropTypeDefaultDescription
sectionsNavigationSection[]-Array of navigation sections
currentPathstring?-Current pathname (for active state)
scrollDetectionbooleantrueEnable scroll detection
wheelHandlingbooleantrueEnable wheel handling
mobileBreakpointnumber1024Mobile breakpoint (in pixels)
headerReact.ReactNode-Sidebar header content
footerReact.ReactNode-Sidebar footer content
LinkComponentReact.ComponentType"a"Link component (Next.js, React Router, etc.)

NavigationSection

PropTypeDescription
titlestringSection title
itemsNavigationItem[]Array of navigation items

NavigationItem

PropTypeDescription
titlestringItem title
hrefstringItem URL
iconReact.ReactNodeOptional icon
badgestringOptional badge
itemsNavigationItem[]Nested items

Examples

Basic Usage

1
2
3
4
5
6
7
8
9
10
11
12

With Nested Items

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

With Icons and Badges

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

With Header and Footer

1
2
3
4