SideBar Component

The SideBar component creates a scrollable vertical panel that’s perfect for navigation menus, filters, or supplementary content. It automatically adjusts to your viewport height and maintains accessibility.

Key Features

• Responsive Design: Automatically adapts to viewport height

• Custom Scrolling: Smooth scrollbar for overflow content

• Flexible Positioning: Left or right side placement

• Sticky Behavior: Maintains position while scrolling

Basic Usage

Create a basic sidebar with navigation:

1
<SideBar side="left">
2
    <nav>
3
        <ul class="space-y-2">
4
            <li>Home</li>
5
            <li>About</li>
6
            <li>Contact</li>
7
        </ul>
8
    </nav>
9
</SideBar>

Sidebar Component Props API

Common Use Cases