Sidebar

The Sidebar component is used to create a full-page Sidebar navigation menu.

The Sidebar component is used to create a full-page Sidebar navigation menu. It is used in both the Kits Dashboard and the Admin pages.

Usage

Let's explore the different ways the Sidebar component can be used.

Basic Usage

Below is a basic example of how to use the Sidebar component.

import { Cog8ToothIcon, CreditCardIcon, Square3Stack3DIcon, Squares2X2Icon } from "@heroicons/react/24/outline"; import { Sidebar, SidebarItem, SidebarContent } from "~/core/ui/Sidebar"; function AppSidebar() { return ( <Sidebar> <SidebarContent className={'py-4'}> <SidebarItem path={'#dashboard'} Icon={() => <Square3Stack3DIcon className={'w-4'} />} > Dashboard </SidebarItem> <SidebarItem path={'#workspace'} Icon={() => <Squares2X2Icon className={'w-4'} />} > Workspace </SidebarItem> <SidebarItem path={'#subscription'} Icon={() => <CreditCardIcon className={'w-4'} />} > Subscription </SidebarItem> <SidebarItem path={'#settings'} Icon={() => <Cog8ToothIcon className={'w-4'} />} > Settings </SidebarItem> </SidebarContent> </Sidebar> ); }

You can create groups of Sidebar items by using the SidebarGroup component.

import { Cog8ToothIcon, CreditCardIcon, Square3Stack3DIcon, Squares2X2Icon } from "@heroicons/react/24/outline"; import { Sidebar, SidebarItem, SidebarContent } from "~/core/ui/Sidebar"; function AppSidebar() { return ( <Sidebar> <SidebarContent className={'py-4'}> <SidebarGroup label='App' collapsible={false}> <SidebarItem path={'#dashboard'} Icon={() => <Square3Stack3DIcon className={'w-4'} />} > Dashboard </SidebarItem> <SidebarItem path={'#workspace'} Icon={() => <Squares2X2Icon className={'w-4'} />} > Workspace </SidebarItem> </SidebarGroup> <SidebarGroup label='Settings' collapsible> <SidebarItem path={'#subscription'} Icon={() => <CreditCardIcon className={'w-4'} />} > Subscription </SidebarItem> <SidebarItem path={'#profile'} Icon={() => <Cog8ToothIcon className={'w-4'} />} > Profile </SidebarItem> </SidebarGroup> </SidebarContent> </Sidebar> ); }

API

The following props are available for the Sidebar components.

The Sidebar component accepts the following props:

  1. collapsed - Whether the sidebar is initially collapsed or not. Defaults to false.
<Sidebar collapsed={false}> ... </Sidebar>

<SidebarItem>

The SidebarItem component accepts the following props:

  1. path - The path to navigate to when the item is clicked.
  2. Icon - The icon to display next to the item.
  3. end - Whether the item should look as "active" when the path matches the current path. Defaults to false. By default, the path will match sub-paths up to 3 levels deep. For example, if the current path is /dashboard, then the item will look as "active" if the path is /dashboard, /dashboard/overview, /dashboard/overview/1, etc. If you want to match the path exactly, then set end to true. In this way, the item will only look as "active" if the path is /dashboard.
<SidebarItem path={'/dashboard'} Icon={() => <Square3Stack3DIcon className={'w-4'} />} end={true} >...</SidebarItem>

<SidebarContent>

The SidebarContent component accepts the following props:

  1. className - The class name to apply to the content container.
<SidebarContent className={'py-4'}>...<SidebarContent>

<SidebarGroup>

The SidebarGroup component accepts the following props:

  1. label - The label of the group.
  2. collapsible - Whether the group is collapsible or not. Defaults to true.
  3. collapsed - Whether the group is initially collapsed or not. Defaults to false.
<SidebarGroup label='App' collapsible={true} collapsed={false}> ... </SidebarGroup>

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS