React Sidebar - Flowbite
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:
import { Sidebar } from "flowbite-react";
Use this example to show a list of navigation menu items by adding <SidebarItem> 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.
Multi-level dropdown#
Use this example to learn how to stack multiple sidebar menu items inside one dropdown menu by using the <SidebarCollapse> component.
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:
Content separator#
Use this example to separate content inside of the sidebar using a horizontal line.
This example can be used to show a call to action button inside the sidebar next to the menu items.
Feature the branded logo of your company on the top side of the sidebar using this example.
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 px-3 py-4 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",
"title": "sr-only",
"icon": {
"base": "h-6 w-6 transition delay-0 ease-in-out",
"open": {
"on": "rotate-180",
"off": ""
}
}
},
"list": "space-y-2 py-2"
},
"cta": {
"base": "mt-6 rounded-lg bg-gray-100 p-4 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-gray-50 dark:bg-gray-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": "flex-1 whitespace-nowrap px-3"
},
"icon": {
"base": "h-6 w-6 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": {
"base": ""
},
"itemGroup": {
"base": "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"
}
}