Sidebar
- Home
- Sidebar
Default Sidebar
Sample Code
Show Code
Copy Code
import {
IconBrandTrello,
IconInbox,
IconLayoutDashboard,
IconLogin2,
IconShoppingBag,
IconUser,
IconUserPlus,
} from '@tabler/icons-react'
import {
Sidebar,
SidebarItem,
SidebarItemGroup,
SidebarItems,
} from 'flowbite-react'
const DefaultSidebarCode = () => {
return (
<>
<div>
<Sidebar aria-label='Default sidebar example'>
<SidebarItems>
<SidebarItemGroup>
<SidebarItem
href='#'
icon={() => <IconLayoutDashboard size={20} />}>
Dashboard
</SidebarItem>
<SidebarItem
href='#'
icon={() => <IconBrandTrello size={20} />}
label='Pro'
labelColor='dark'>
Kanban
</SidebarItem>
<SidebarItem
href='#'
icon={() => <IconInbox size={20} />}
label='3'>
Inbox
</SidebarItem>
<SidebarItem href='#' icon={() => <IconUser size={20} />}>
Users
</SidebarItem>
<SidebarItem href='#' icon={() => <IconShoppingBag size={20} />}>
Products
</SidebarItem>
<SidebarItem href='#' icon={() => <IconLogin2 size={20} />}>
Sign In
</SidebarItem>
<SidebarItem href='#' icon={() => <IconUserPlus size={20} />}>
Sign Up
</SidebarItem>
</SidebarItemGroup>
</SidebarItems>
</Sidebar>
</div>
</>
)
}
export default DefaultSidebarCode
Multi-level dropdown
Sample Code
Show Code
Copy Code
import {
IconLayoutDashboard,
IconBrandShopee,
IconInbox,
IconUser,
IconShoppingBag,
IconLogin2,
IconUserPlus,
} from '@tabler/icons-react'
import {
Sidebar,
SidebarCollapse,
SidebarItem,
SidebarItemGroup,
SidebarItems,
} from 'flowbite-react'
const MultilevelDropdownCode = () => {
return (
<>
<div>
<Sidebar aria-label='Sidebar with multi-level dropdown example'>
<SidebarItems>
<SidebarItemGroup>
<SidebarItem
href='#'
icon={() => <IconLayoutDashboard size={20} />}>
Dashboard
</SidebarItem>
<SidebarCollapse
icon={() => <IconBrandShopee size={20} />}
label='E-commerce'>
<SidebarItem href='#'>Products</SidebarItem>
<SidebarItem href='#'>Sales</SidebarItem>
<SidebarItem href='#'>Refunds</SidebarItem>
<SidebarItem href='#'>Shipping</SidebarItem>
</SidebarCollapse>
<SidebarItem href='#' icon={() => <IconInbox size={20} />}>
Inbox
</SidebarItem>
<SidebarItem href='#' icon={() => <IconUser size={20} />}>
Users
</SidebarItem>
<SidebarItem href='#' icon={() => <IconShoppingBag size={20} />}>
Products
</SidebarItem>
<SidebarItem href='#' icon={() => <IconLogin2 size={20} />}>
Sign In
</SidebarItem>
<SidebarItem href='#' icon={() => <IconUserPlus size={20} />}>
Sign Up
</SidebarItem>
</SidebarItemGroup>
</SidebarItems>
</Sidebar>
</div>
</>
)
}
export default MultilevelDropdownCode
Custom Dropdown Icon
Sample Code
Show Code
Copy Code
import {
IconLayoutDashboard,
IconBrandShopee,
IconInbox,
IconUser,
IconShoppingBag,
IconLogin2,
IconUserPlus,
} from '@tabler/icons-react'
import {
Sidebar,
SidebarCollapse,
SidebarItem,
SidebarItemGroup,
SidebarItems,
} from 'flowbite-react'
import { HiOutlineMinusSm, HiOutlinePlusSm } from 'react-icons/hi'
import { twMerge } from 'tailwind-merge'
const CustomDropdownIconCode = () => {
return (
<>
<div>
<Sidebar aria-label='Sidebar with multi-level dropdown example'>
<SidebarItems>
<SidebarItemGroup>
<SidebarItem
href='#'
icon={() => <IconLayoutDashboard size={20} />}>
Dashboard
</SidebarItem>
<SidebarCollapse
icon={() => <IconBrandShopee size={20} />}
label='E-commerce'
renderChevronIcon={(theme, open) => {
const IconComponent = open
? HiOutlineMinusSm
: HiOutlinePlusSm
return (
<IconComponent
aria-hidden
className={twMerge(
theme.label.icon.open[open ? 'on' : 'off']
)}
/>
)
}}>
<SidebarItem href='#'>Products</SidebarItem>
<SidebarItem href='#'>Sales</SidebarItem>
<SidebarItem href='#'>Refunds</SidebarItem>
<SidebarItem href='#'>Shipping</SidebarItem>
<SidebarItem href='#'>User</SidebarItem>
</SidebarCollapse>
<SidebarItem href='#' icon={() => <IconInbox size={20} />}>
Inbox
</SidebarItem>
<SidebarItem href='#' icon={() => <IconUser size={20} />}>
Users
</SidebarItem>
<SidebarItem href='#' icon={() => <IconShoppingBag size={20} />}>
Products
</SidebarItem>
<SidebarItem href='#' icon={() => <IconLogin2 size={20} />}>
Sign In
</SidebarItem>
<SidebarItem href='#' icon={() => <IconUserPlus size={20} />}>
Sign Up
</SidebarItem>
</SidebarItemGroup>
</SidebarItems>
</Sidebar>
</div>
</>
)
}
export default CustomDropdownIconCode
Content Separator
Sample Code
Show Code
Copy Code
import {
IconLayoutDashboard,
IconBrandTrello,
IconInbox,
IconWorldUpload,
IconFileText,
IconInfoSquareRounded,
IconUserPlus,
} from '@tabler/icons-react'
import {
Sidebar,
SidebarItem,
SidebarItemGroup,
SidebarItems,
} from 'flowbite-react'
const ContentSeparatorCode = () => {
return (
<>
<div>
<Sidebar aria-label='Sidebar with content separator example'>
<SidebarItems>
<SidebarItemGroup>
<SidebarItem
href='#'
icon={() => <IconLayoutDashboard size={20} />}>
Dashboard
</SidebarItem>
<SidebarItem href='#' icon={() => <IconBrandTrello size={20} />}>
Kanban
</SidebarItem>
<SidebarItem href='#' icon={() => <IconInbox size={20} />}>
Inbox
</SidebarItem>
</SidebarItemGroup>
<SidebarItemGroup>
<SidebarItem href='#' icon={() => <IconWorldUpload size={20} />}>
Upgrade to Pro
</SidebarItem>
<SidebarItem href='#' icon={() => <IconFileText size={20} />}>
Documentation
</SidebarItem>
<SidebarItem
href='#'
icon={() => <IconInfoSquareRounded size={20} />}>
Help
</SidebarItem>
<SidebarItem href='#' icon={() => <IconUserPlus size={20} />}>
Sign Up
</SidebarItem>
</SidebarItemGroup>
</SidebarItems>
</Sidebar>
</div>
</>
)
}
export default ContentSeparatorCode
Sidebar with button
Sample Code
Show Code
Copy Code
import {
IconLayoutDashboard,
IconBrandTrello,
IconInbox,
IconUser,
} from '@tabler/icons-react'
import {
Sidebar,
Badge,
SidebarCTA,
SidebarItem,
SidebarItemGroup,
SidebarItems,
} from 'flowbite-react'
const SidebarWithButtonCode = () => {
return (
<>
<div>
<Sidebar aria-label='Sidebar with call to action button example'>
<SidebarItems>
<SidebarItemGroup>
<SidebarItem
href='#'
icon={() => <IconLayoutDashboard size={20} />}>
Dashboard
</SidebarItem>
<SidebarItem href='#' icon={() => <IconBrandTrello size={20} />}>
Kanban
</SidebarItem>
<SidebarItem href='#' icon={() => <IconInbox size={20} />}>
Inbox
</SidebarItem>
<SidebarItem href='#' icon={() => <IconUser size={20} />}>
Users
</SidebarItem>
</SidebarItemGroup>
</SidebarItems>
<SidebarCTA>
<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'>
<svg
aria-hidden
className='h-4 w-4'
fill='currentColor'
viewBox='0 0 20 20'
xmlns='http://www.w3.org/2000/svg'>
<path
fillRule='evenodd'
d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'
clipRule='evenodd'
/>
</svg>
</button>
</div>
<div className='mb-3 text-sm text-cyan-900 dark:text-gray-400'>
Preview the new Flowbite dashboard navigation! You can turn the
new navigation off for a limited time in your profile.
</div>
<a
className='text-sm text-cyan-900 underline hover:text-cyan-800 dark:text-gray-400 dark:hover:text-gray-300'
href='#'>
Turn new navigation off
</a>
</SidebarCTA>
</Sidebar>
</div>
</>
)
}
export default SidebarWithButtonCode
Sidebar with logo
Sample Code
Show Code
Copy Code
import FullLogo from '@/app/(DashboardLayout)/layout/shared/logo/FullLogo'
import {
IconLayoutDashboard,
IconBrandTrello,
IconInbox,
IconUser,
IconShoppingBag,
IconLogin2,
IconUserPlus,
} from '@tabler/icons-react'
import {
Sidebar,
SidebarItem,
SidebarItemGroup,
SidebarItems,
} from 'flowbite-react'
const SidebarWithLogoCode = () => {
return (
<>
<div>
<Sidebar aria-label='Sidebar with logo branding example'>
<div className='pb-5'>
<FullLogo />
</div>
<SidebarItems>
<SidebarItemGroup>
<SidebarItem
href='#'
icon={() => <IconLayoutDashboard size={20} />}>
Dashboard
</SidebarItem>
<SidebarItem href='#' icon={() => <IconBrandTrello size={20} />}>
Kanban
</SidebarItem>
<SidebarItem href='#' icon={() => <IconInbox size={20} />}>
Inbox
</SidebarItem>
<SidebarItem href='#' icon={() => <IconUser size={20} />}>
Users
</SidebarItem>
<SidebarItem href='#' icon={() => <IconShoppingBag size={20} />}>
Products
</SidebarItem>
<SidebarItem href='#' icon={() => <IconLogin2 size={20} />}>
Sign In
</SidebarItem>
<SidebarItem href='#' icon={() => <IconUserPlus size={20} />}>
Sign Up
</SidebarItem>
</SidebarItemGroup>
</SidebarItems>
</Sidebar>
</div>
</>
)
}
export default SidebarWithLogoCode
API ( Sidebar )
| Prop | Description | Type | Default |
|---|---|---|---|
href | The URL to navigate to when the item is clicked. | # | - |
icon | The icon to display alongside the item text. | "HiChartPie" | "HiViewBoards" | - |
label | The label to display as a badge on the item. | "Pro" | - |
labelColor | The background color of the label badge. | "dark" | default |
Settings
Theme Option
Theme Direction
Theme Colors
BLUE_THEME
AQUA_THEME
PURPLE_THEME
GREEN_THEME
CYAN_THEME
ORANGE_THEME
Layout Type
Container Option
Sidebar Type
Card With
Theme Border Radius
Current Value: 7