Sidebar
A customizable mobile sidebar component with support for headers, content, footers, and triggers.
Installation
1. Dependencies
npm install clsx tailwind-merge
2. Paste inside @/lib/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: Parameters<typeof clsx>) {
return twMerge(clsx(...inputs));
}
Copy Sidebar Code
Sidebar Props
| Name | Type | Required | Default | Description |
|---|
| children | React.ReactNode | Yes | undefined | Content to be displayed inside the sidebar. |
| isOpen | boolean | Yes | false | Controls the visibility of the sidebar. |
| onClose | () => void | Yes | undefined | Callback function triggered when the sidebar is closed. |
| position | "left" | "right" | No | "left" | Position of the sidebar (left or right). |
| className | string | No | undefined | Additional class names for styling the sidebar container. |
| overlayClassName | string | No | undefined | Class names for styling the overlay. |
| width | string | No | "w-64" | Width of the sidebar. |
SidebarHeader Props
| Name | Type | Required | Default | Description |
|---|
| children | React.ReactNode | Yes | undefined | Content to be displayed in the sidebar header. |
| className | string | No | undefined | Additional class names for styling the header. |
SidebarContent Props
| Name | Type | Required | Default | Description |
|---|
| children | React.ReactNode | Yes | undefined | Content to be displayed in the sidebar body. |
| className | string | No | undefined | Additional class names for styling the content area. |
SidebarFooter Props
| Name | Type | Required | Default | Description |
|---|
| children | React.ReactNode | Yes | undefined | Content to be displayed in the sidebar footer. |
| className | string | No | undefined | Additional class names for styling the footer. |
SidebarTrigger Props
| Name | Type | Required | Default | Description |
|---|
| onClick | () => void | Yes | undefined | Callback function triggered when the trigger is clicked. |
| className | string | No | undefined | Additional class names for styling the trigger button. |
| aria-label | string | No | "Toggle Menu" | Accessible label for the trigger button. |
SidebarClose Props
| Name | Type | Required | Default | Description |
|---|
| onClick | () => void | Yes | undefined | Callback function triggered when the close button is clicked. |
| className | string | No | undefined | Additional class names for styling the close button. |
| aria-label | string | No | "Close Menu" | Accessible label for the close button. |