Sidebar

A sidebar is a component that helps you organize your content and navigation.

Installation

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add sidebar

Collapsible

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

Hidden

When the trigger is clicked, the sidebar slides out.

sidebar basic

View

Code

Dock

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

sidebar dock

View

Code

Fixed

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

sidebar fixed

View

Code

Variant

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

Float

sidebar float

View

Code

Inset

sidebar inset

View

Code

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>
  )
}