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.)
Usage
1234567891011121314151617181920212223242526272829303132333435363738394041424344
API Reference
| Prop | Type | Default | Description |
|---|
| sections | NavigationSection[] | - | Array of navigation sections |
| currentPath | string? | - | Current pathname (for active state) |
| scrollDetection | boolean | true | Enable scroll detection |
| wheelHandling | boolean | true | Enable wheel handling |
| mobileBreakpoint | number | 1024 | Mobile breakpoint (in pixels) |
| header | React.ReactNode | - | Sidebar header content |
| footer | React.ReactNode | - | Sidebar footer content |
| LinkComponent | React.ComponentType | "a" | Link component (Next.js, React Router, etc.) |
NavigationSection
| Prop | Type | Description |
|---|
| title | string | Section title |
| items | NavigationItem[] | Array of navigation items |
NavigationItem
| Prop | Type | Description |
|---|
| title | string | Item title |
| href | string | Item URL |
| icon | React.ReactNode | Optional icon |
| badge | string | Optional badge |
| items | NavigationItem[] | Nested items |
Examples
With Nested Items
123456789101112131415161718