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';
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>
)
}
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": "h-6 w-6"
},
"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": ""
},
"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"
}
}