Docs Quickstart Figma Flowbite
1.3.0
Components Sidebar

Sidebar

Use the sidebar component to show a list of menu items and multi-level menu items to navigate on your website


Default sidebar

Show on Github
DashboardKanbanInboxUsersProductsHello world !
html
typescript
<flowbite-sidebar [isOpen]="true">
  <flowbite-sidebar-menu>
    <flowbite-sidebar-item>Dashboard</flowbite-sidebar-item>
    <flowbite-sidebar-item>Kanban</flowbite-sidebar-item>
    <flowbite-sidebar-item>Inbox</flowbite-sidebar-item>
    <flowbite-sidebar-item>Users</flowbite-sidebar-item>
    <flowbite-sidebar-item>Products</flowbite-sidebar-item>
  </flowbite-sidebar-menu>
  <flowbite-sidebar-page-content>Hello world !</flowbite-sidebar-page-content>
</flowbite-sidebar>

Multi-level menu

Show on Github
Dashboard

E-commerce

KanbanInboxUsersProducts
Hello world !
html
typescript
<flowbite-sidebar [isOpen]="true">
  <flowbite-sidebar-menu>
    <flowbite-sidebar-item>Dashboard</flowbite-sidebar-item>
    <flowbite-sidebar-item-group title="E-commerce">
      <flowbite-sidebar-item>Products</flowbite-sidebar-item>
      <flowbite-sidebar-item>Billing</flowbite-sidebar-item>
      <flowbite-sidebar-item>Invoice</flowbite-sidebar-item>
    </flowbite-sidebar-item-group>
    <flowbite-sidebar-item>Kanban</flowbite-sidebar-item>
    <flowbite-sidebar-item>Inbox</flowbite-sidebar-item>
    <flowbite-sidebar-item>Users</flowbite-sidebar-item>
    <flowbite-sidebar-item>Products</flowbite-sidebar-item>
  </flowbite-sidebar-menu>
  <flowbite-sidebar-page-content>Hello world !</flowbite-sidebar-page-content>
</flowbite-sidebar>
Flowbite

© 2019-2024 Flowbite™ is a registered trademark. All Rights Reserved.