Sidebar

Basic

Sidebar show a list of menu items and multi-level menu items on either side of the page to navigate on your website

Installation

Creating a Sidebar

There are several ways to create a sidebar. Let's begin with the most straightforward approach.

App Sidebar

Imagine you're building a dashboard; you'll likely need a sidebar that lists all your menu.

Layout

Once you've created the sidebar, you can wrap it inside a layout component. Here's what it looks like:

Done

Great job! You've successfully created a sidebar. Now, let's put it to use.

Using the Layout

There are several ways to use the layout, depending on your framework. Or, if you're not using any framework, you can simply apply the layout component.

Common Usage

A typical approach is to wrap your content with the layout like this:

<AppLayout>
  {/* your main content */}
</AppLayout>

Inertia.js

If you're using Inertia.js, you can implement a persistent layout. Here's how it looks:

Home.layout = (page: React.ReactNode) => <AppLayout children={page} />

Next.js

If you're using Next.js, there's no extra configuration needed. Simply create a page component and ensure it inherits the layout like this:

app/dashboard
├── app-sidebar.tsx
├── layout.tsx
└── page.tsx

Collapsible

The sidebar is collapsible with three options for collapsibility: offcanvas, dock, and fixed. When set to dock, the sidebar will be pinned to a specified location, displaying an icon and tooltip by default.

Offcanvas

This is the default collapsible type. When the trigger is clicked, the sidebar slides out.

Dock

This collapsible type is used in the sidebar of this documentation. Clicking the trigger causes the sidebar to slide out.

Fixed

Choosing the fixed type ensures the sidebar is static and cannot be toggled.

Variant

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

Default

This is the default variant and the most common style for sidebars.

Floating

Using the floating variant, the sidebar will be fixed at the bottom of the screen, similar to a modal..

Inset

With the inset variant, the sidebar is also fixed at the bottom of the screen, resembling a modal.

Default Open

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

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

Trigger

The trigger is a button that toggles the sidebar on both desktop and mobile devices. On desktop, it collapses the sidebar, while on mobile, it opens the sidebar within the <Sheet/> component.

<Sidebar.Trigger/>

Rail

<Sidebar.Rail/> is a button that toggles the sidebar, positioned as a slim bar along the sidebar's border rather than a traditional button at the top. It’s typically placed beneath the <Sidebar.Footer/>.

<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.Provider isOpen={isOpen} onOpenChange={setIsOpen}>
      <Sidebar />
    </Sidebar.Provider>
  )
}

Modal

Sometimes, you may want a modal to open when a user clicks a sidebar item. You can control the modal's visibility using the isOpen prop, which is especially useful when managing multiple modals. However, if you only have one or two modals, you can simplify by wrapping them directly within the <Modal /> component like this:

<Sidebar.Section title="Projects">
  <Sidebar.Item icon={IconPackage} href='#'>All Projects</Sidebar.Item>
  <Modal>
    <Sidebar.Item icon={IconPlus}>Create New Project</Sidebar.Item>
    <Modal.Content>
      <Modal.Header title="New Project" />
      <Modal.Footer>
        <Modal.Close>Close</Modal.Close>
      </Modal.Footer>
    </Modal.Content>
  </Modal>
</Sidebar.Section>