HQ UI

Sidebar

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

Installation

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.

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.

Float

Inset

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