React Sidebar - Flowbite
Use the sidebar component to show a list of menu items and multi-level dropdown items on either side of the page to navigate on your website
The sidebar component can be used as a complementary element relative to the navbar shown on either the left or right side of the page used for the navigation on your web application, including menu items, multi-level dropdown items, call to actions elements, and more.
Default sidebar
<Sidebar aria-label="Default sidebar example">
<Sidebar.Items>
<Sidebar.ItemGroup>
<Sidebar.Item
href="#"
icon={HiChartPie}
>
Dashboard
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiViewBoards}
label="Pro"
labelColor="alternative"
>
Kanban
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiInbox}
label="3"
>
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>Multi-level dropdown
<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"
>
<Sidebar.Item href="#">
Products
</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
<Sidebar aria-label="Sidebar with content separator example">
<Sidebar.Items>
<Sidebar.ItemGroup>
<Sidebar.Item
href="#"
icon={HiChartPie}
>
Dashboard
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiViewBoards}
>
Kanban
</Sidebar.Item>
<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.ItemGroup>
<Sidebar.Item
href="#"
icon={HiChartPie}
>
Upgrade to Pro
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiViewBoards}
>
Documentation
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={BiBuoy}
>
Help
</Sidebar.Item>
</Sidebar.ItemGroup>
</Sidebar.Items>
</Sidebar>CTA button
<Sidebar aria-label="Sidebar with call to action button example">
<Sidebar.Items>
<Sidebar.ItemGroup>
<Sidebar.Item
href="#"
icon={HiChartPie}
>
Dashboard
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiViewBoards}
>
Kanban
</Sidebar.Item>
<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.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-cyan-50 p-1 text-cyan-900 hover:bg-cyan-200 focus:ring-2 focus:ring-cyan-400 dark:bg-cyan-900 dark:text-cyan-400 dark:hover:bg-cyan-800"
type="button"
>
<SeeSourceCodeForSVG />
</button>
</div>
<p className="mb-3 text-sm text-cyan-900 dark:text-cyan-400">
Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.
</p>
<a
className="text-sm text-cyan-900 underline hover:text-cyan-800 dark:text-cyan-400 dark:hover:text-cyan-300"
href="#"
>
Turn new navigation off
</a>
</Sidebar.CTA>
</Sidebar>Logo branding
<Sidebar aria-label="Sidebar with logo branding example">
<Sidebar.Logo
href="#"
img="/favicon.svg"
imgAlt="Flowbite logo"
>
Flowbite
</Sidebar.Logo>
<Sidebar.Items>
<Sidebar.ItemGroup>
<Sidebar.Item
href="#"
icon={HiChartPie}
>
Dashboard
</Sidebar.Item>
<Sidebar.Item
href="#"
icon={HiViewBoards}
>
Kanban
</Sidebar.Item>
<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>