Sidebar

A full collapsible navigation shell with icon mode, groups and sub-menus.

Install

npx shadcn add @clearly/sidebar

Preview

Main content

Usage

import { Sidebar } from "@/components/ui/sidebar"

<Sidebar />

Every Clearly component also accepts glass (subtle·medium·strong), specular and className.

Props

PropTypeDefaultDescription
side"left" | "right""left"Which screen edge.
variant"sidebar" | "floating" | "inset""sidebar"Visual variant.
collapsible"offcanvas" | "icon" | "none""offcanvas"Collapse behavior.