Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/sidebar-toggle.jsonStorybook
Explore all variants, controls, and accessibility checks in the interactive Storybook playground.
View in StorybookCode
"use client";
import { Menu, X } from "lucide-react";
import { cn } from "../../lib/utils";
import { Button } from "../button/button";
export type SidebarToggleProps = {
className?: string;
/** Called when user clicks the toggle. */
onToggle: () => void;
/** Whether the sidebar is open. */
open: boolean;
};
/** Responsive sidebar toggle button that shows Menu/X icons based on state. */
export function SidebarToggle({
className,
onToggle,
open,
}: SidebarToggleProps) {
return (
<>
{/* Mobile: shows X when open, Menu when closed */}
<Button
aria-label={open ? "Close menu" : "Open menu"}
className={cn("lg:hidden", className)}
onClick={onToggle}
size="icon"
variant="ghost"
>
{open ? <X className="size-5" /> : <Menu className="size-5" />}
</Button>
{/* Desktop: always shows Menu icon */}
<Button
aria-label="Toggle sidebar"
className={cn("hidden lg:flex", className)}
onClick={onToggle}
size="icon"
variant="ghost"
>
<Menu className="size-5" />
</Button>
</>
);
}