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