React Sidebar - Flowbite
Use the sidebar component to show a list of menu items including multi-level dropdown menu on the left or right side of your page for admin dashboards and applications
The sidebar component is an UI component that you can use for the navigation mechanism in your website or application that you would position to the left or right side of your page.
A sidebar can include content such as menu list items, dropdown, user profile information, CTA buttons, and more - you can use the custom props from React to customize the options and the utility classes from Tailwind CSS to update the styles.
To start using the sidebar component make sure you import it from the Flowbite React library:
'use client';
import { Sidebar } from 'flowbite-react';
Table of Contents#
- Default sidebar
- Multi-level dropdown
- Multi-level dropdown with custom chevron
- Content separator
- Sidebar with button
- Sidebar with logo
- Theme
- References
Default sidebar#
Use this example to show a list of navigation menu items by adding <Sidebar.Item> children components inside the <Sidebar> component and pass the href prop to set a URL and icon to apply any icons from the react-icons icon library.
You can also add a text label as a badge by using the label prop from React and the labelColor to set the color of the label background.
Edit on GitHub
Toggle dark mode
- React TypeScript
'use client';
import { Sidebar } from 'flowbite-react';
import { HiArrowSmRight, HiChartPie, HiInbox, HiShoppingBag, HiTable, HiUser, HiViewBoards } from 'react-icons/hi';
export default function DefaultSidebar() {
return (
<Sidebar aria-label="Default sidebar example">
<Sidebar.Items>
<Sidebar.ItemGroup>
<Sidebar.Item
href="#"
icon={HiChartPie}
>
<p>
Dashboard
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiViewBoards}
label="Pro"
labelColor="dark"
>
<p>
Kanban
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiInbox}
label="3"
>
<p>
Inbox
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiUser}
>
<p>
Users
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiShoppingBag}
>
<p>
Products
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiArrowSmRight}
>
<p>
Sign In
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiTable}
>
<p>
Sign Up
</p>
</Sidebar.Item>
</Sidebar.ItemGroup>
</Sidebar.Items>
</Sidebar>
)
}
Multi-level dropdown#
Use this example to learn how to stack multiple sidebar menu items inside one dropdown menu by using the <Sidebar.Collapse> component.
Edit on GitHub
Toggle dark mode
- React TypeScript
'use client';
import { Sidebar } from 'flowbite-react';
import { HiArrowSmRight, HiChartPie, HiInbox, HiShoppingBag, HiTable, HiUser, HiViewBoards } from 'react-icons/hi';
export default function MultiLevelDropdown() {
return (
<Sidebar aria-label="Sidebar with multi-level dropdown example">
<Sidebar.Items>
<Sidebar.ItemGroup>
<Sidebar.Item
href="#"
icon={HiChartPie}
>
<p>
Dashboard
</p>
</Sidebar.Item>
<Sidebar.Collapse
icon={HiShoppingBag}
label="E-commerce"
>
<Sidebar.Item href="#">
Products
</Sidebar.Item>
<Sidebar.Item href="#">
Sales
</Sidebar.Item>
<Sidebar.Item href="#">
Refunds
</Sidebar.Item>
<Sidebar.Item href="#">
Shipping
</Sidebar.Item>
</Sidebar.Collapse>
<Sidebar.Item
href="#"
icon={HiInbox}
>
<p>
Inbox
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiUser}
>
<p>
Users
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiShoppingBag}
>
<p>
Products
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiArrowSmRight}
>
<p>
Sign In
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiTable}
>
<p>
Sign Up
</p>
</Sidebar.Item>
</Sidebar.ItemGroup>
</Sidebar.Items>
</Sidebar>
)
}
Multi-level dropdown with custom chevron#
The chevronIcon property offers customization for the chevron icon. Alternatively, for more complex scenarios, the renderChevronIcon option can be utilized. Here's an example:
Edit on GitHub
Toggle dark mode
- React TypeScript
'use client';
import { Sidebar } from 'flowbite-react';
import { twMerge } from 'tailwind-merge';
import { HiOutlineMinusSm, HiOutlinePlusSm, HiArrowSmRight, HiChartPie, HiInbox, HiShoppingBag, HiTable, HiUser, HiViewBoards } from 'react-icons/hi';
export default function MultiLevelDropdownCustomChevronIcon() {
return (
<Sidebar aria-label="Sidebar with multi-level dropdown example">
<Sidebar.Items>
<Sidebar.ItemGroup>
<Sidebar.Item href="#" icon={HiChartPie}>
Dashboard
</Sidebar.Item>
<Sidebar.Collapse
icon={HiShoppingBag}
label="E-commerce"
renderChevronIcon={(theme, open) => {
const IconComponent = open ? HiOutlineMinusSm : HiOutlinePlusSm;
return <IconComponent aria-hidden className={twMerge(theme.label.icon.open[open ? 'on' : 'off'])} />
}}
>
<Sidebar.Item href="#">Products</Sidebar.Item>
<Sidebar.Item href="#">Sales</Sidebar.Item>
<Sidebar.Item href="#">Refunds</Sidebar.Item>
<Sidebar.Item href="#">Shipping</Sidebar.Item>
</Sidebar.Collapse>
<Sidebar.Item href="#" icon={HiInbox}>
Inbox
</Sidebar.Item>
<Sidebar.Item href="#" icon={HiUser}>
Users
</Sidebar.Item>
<Sidebar.Item href="#" icon={HiShoppingBag}>
Products
</Sidebar.Item>
<Sidebar.Item href="#" icon={HiArrowSmRight}>
Sign In
</Sidebar.Item>
<Sidebar.Item href="#" icon={HiTable}>
Sign Up
</Sidebar.Item>
</Sidebar.ItemGroup>
</Sidebar.Items>
</Sidebar>
)
}
Content separator#
Use this example to separate content inside of the sidebar using a horizontal line.
Edit on GitHub
Toggle dark mode
- React TypeScript
'use client';
import { Sidebar } from 'flowbite-react';
import { HiArrowSmRight, HiChartPie, HiInbox, HiShoppingBag, HiTable, HiUser, HiViewBoards } from 'react-icons/hi';
export default function ContentSeparator() {
return (
<Sidebar aria-label="Sidebar with content separator example">
<Sidebar.Items>
<Sidebar.ItemGroup>
<Sidebar.Item
href="#"
icon={HiChartPie}
>
<p>
Dashboard
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiViewBoards}
>
<p>
Kanban
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiInbox}
>
<p>
Inbox
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiUser}
>
<p>
Users
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiShoppingBag}
>
<p>
Products
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiArrowSmRight}
>
<p>
Sign In
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiTable}
>
<p>
Sign Up
</p>
</Sidebar.Item>
</Sidebar.ItemGroup>
<Sidebar.ItemGroup>
<Sidebar.Item
href="#"
icon={HiChartPie}
>
<p>
Upgrade to Pro
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiViewBoards}
>
<p>
Documentation
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={BiBuoy}
>
<p>
Help
</p>
</Sidebar.Item>
</Sidebar.ItemGroup>
</Sidebar.Items>
</Sidebar>
)
}
Sidebar with button#
This example can be used to show a call to action button inside the sidebar next to the menu items.
Edit on GitHub
Toggle dark mode
- React TypeScript
'use client';
import { Badge, Sidebar } from 'flowbite-react';
import { HiArrowSmRight, HiChartPie, HiInbox, HiShoppingBag, HiTable, HiUser, HiViewBoards } from 'react-icons/hi';
export default function CTAButton() {
return (
<Sidebar aria-label="Sidebar with call to action button example">
<Sidebar.Items>
<Sidebar.ItemGroup>
<Sidebar.Item
href="#"
icon={HiChartPie}
>
<p>
Dashboard
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiViewBoards}
>
<p>
Kanban
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiInbox}
>
<p>
Inbox
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiUser}
>
<p>
Users
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiShoppingBag}
>
<p>
Products
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiArrowSmRight}
>
<p>
Sign In
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiTable}
>
<p>
Sign Up
</p>
</Sidebar.Item>
</Sidebar.ItemGroup>
</Sidebar.Items>
<Sidebar.CTA>
<div className="mb-3 flex items-center">
<Badge color="warning">
Beta
</Badge>
<button
aria-label="Close"
className="-m-1.5 ml-auto inline-flex h-6 w-6 rounded-lg bg-gray-100 p-1 text-cyan-900 hover:bg-gray-200 focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600"
type="button"
>
<SeeSourceCodeForSVG />
</button>
</div>
<div className="mb-3 text-sm text-cyan-900 dark:text-gray-400">
<p>
Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your
profile.
</p>
</div>
<a
className="text-sm text-cyan-900 underline hover:text-cyan-800 dark:text-gray-400 dark:hover:text-gray-300"
href="#"
>
<p>
Turn new navigation off
</p>
</a>
</Sidebar.CTA>
</Sidebar>
)
}
Sidebar with logo#
Feature the branded logo of your company on the top side of the sidebar using this example.
Edit on GitHub
Toggle dark mode
- React TypeScript
'use client';
import { Sidebar } from 'flowbite-react';
import { HiArrowSmRight, HiChartPie, HiInbox, HiShoppingBag, HiTable, HiUser, HiViewBoards } from 'react-icons/hi';
export default function LogoBranding() {
return (
<Sidebar aria-label="Sidebar with logo branding example">
<Sidebar.Logo
href="#"
img="/favicon.svg"
imgAlt="Flowbite logo"
>
<p>
Flowbite
</p>
</Sidebar.Logo>
<Sidebar.Items>
<Sidebar.ItemGroup>
<Sidebar.Item
href="#"
icon={HiChartPie}
>
<p>
Dashboard
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiViewBoards}
>
<p>
Kanban
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiInbox}
>
<p>
Inbox
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiUser}
>
<p>
Users
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiShoppingBag}
>
<p>
Products
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiArrowSmRight}
>
<p>
Sign In
</p>
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiTable}
>
<p>
Sign Up
</p>
</Sidebar.Item>
</Sidebar.ItemGroup>
</Sidebar.Items>
</Sidebar>
)
}
Theme#
To learn more about how to customize the appearance of components, please see the Theme docs.
{
"root": {
"base": "h-full",
"collapsed": {
"on": "w-16",
"off": "w-64"
},
"inner": "h-full overflow-y-auto overflow-x-hidden rounded bg-gray-50 py-4 px-3 dark:bg-gray-800"
},
"collapse": {
"button": "group flex w-full items-center rounded-lg p-2 text-base font-normal text-gray-900 transition duration-75 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700",
"icon": {
"base": "h-6 w-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white",
"open": {
"off": "",
"on": "text-gray-900"
}
},
"label": {
"base": "ml-3 flex-1 whitespace-nowrap text-left",
"icon": {
"base": "h-6 w-6 transition ease-in-out delay-0",
"open": {
"on": "rotate-180",
"off": ""
}
}
},
"list": "space-y-2 py-2"
},
"cta": {
"base": "mt-6 rounded-lg p-4 bg-gray-100 dark:bg-gray-700",
"color": {
"blue": "bg-cyan-50 dark:bg-cyan-900",
"dark": "bg-dark-50 dark:bg-dark-900",
"failure": "bg-red-50 dark:bg-red-900",
"gray": "bg-alternative-50 dark:bg-alternative-900",
"green": "bg-green-50 dark:bg-green-900",
"light": "bg-light-50 dark:bg-light-900",
"red": "bg-red-50 dark:bg-red-900",
"purple": "bg-purple-50 dark:bg-purple-900",
"success": "bg-green-50 dark:bg-green-900",
"yellow": "bg-yellow-50 dark:bg-yellow-900",
"warning": "bg-yellow-50 dark:bg-yellow-900"
}
},
"item": {
"base": "flex items-center justify-center rounded-lg p-2 text-base font-normal text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700",
"active": "bg-gray-100 dark:bg-gray-700",
"collapsed": {
"insideCollapse": "group w-full pl-8 transition duration-75",
"noIcon": "font-bold"
},
"content": {
"base": "px-3 flex-1 whitespace-nowrap"
},
"icon": {
"base": "h-6 w-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white",
"active": "text-gray-700 dark:text-gray-100"
},
"label": "",
"listItem": ""
},
"items": "",
"itemGroup": "mt-4 space-y-2 border-t border-gray-200 pt-4 first:mt-0 first:border-t-0 first:pt-0 dark:border-gray-700",
"logo": {
"base": "mb-5 flex items-center pl-2.5",
"collapsed": {
"on": "hidden",
"off": "self-center whitespace-nowrap text-xl font-semibold dark:text-white"
},
"img": "mr-3 h-6 sm:h-7"
}
}