Installation

Basic

Collapsible

The sidebar is collapsible with three options for collapsibility: hidden, dock, and none.

Hidden

When the trigger is clicked, the sidebar slides out.

Dock

When set to dock, the sidebar will be pinned to a specified location, displaying an icon and tooltip by default.

Fixed

Choosing the none collapsible ensures the sidebar is static and cannot be toggled.

Variant

There are three types of sidebar variants: default, float, and inset, each with distinct behaviors.

Default

Float

Inset

Default Open

The sidebar's default open state can be managed using the defaultOpen prop.

<Sidebar.Provider defaultOpen>
    <Sidebar />
    <Sidebar.Inset />
</Sidebar.Provider>

Rail

<Sidebar.Rail/> is a button that toggles the sidebar, positioned as a slim bar along the sidebar's border.

<Sidebar.Rail />

Controlled

To manually control the sidebar's state, use the isOpen prop. When isOpen is set to true, the sidebar opens; when it's false, the sidebar closes.

export function AppSidebar() {
  const [isOpen, setIsOpen] = React.useState(false)
 
  return (
    <Sidebar isOpen={isOpen} onOpenChange={setIsOpen}>
        {/* Rest of your code */}
    </Sidebar>
  )
}