Sidebar

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.

Setup

<script>
	import { Sidebar, SidebarBrand, SidebarCta, SidebarDropdownItem, SidebarDropdownWrapper, SidebarGroup, SidebarItem, SidebarWrapper } from 'flowbite-svelte';
</script>

Default sidebar

Use this example to show a responsive list of menu items inside the sidebar with icons and labels.

<Sidebar>
  <SidebarWrapper>
    <SidebarGroup>
      <SidebarItem label="Dashboard" icon={{ name: ChartPie }} />
      <SidebarItem label="Kanban" {spanClass} icon={{ name: ViewGrid }}>
        <svelte:fragment slot="subtext">
          <span
            class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300"
            >Pro</span
          >
        </svelte:fragment>
      </SidebarItem>
      <SidebarItem label="Inbox" {spanClass} icon={{ name: InboxIn }}>
        <svelte:fragment slot="subtext">
          <span
            class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
            >3</span
          >
        </svelte:fragment>
      </SidebarItem>
      <SidebarItem label="Users" icon={{ name: User }} />
      <SidebarItem label="Sign In" icon={{ name: Login }} />
      <SidebarItem label="Sign Up" icon={{ name: Cog }} />
    </SidebarGroup>
  </SidebarWrapper>
</Sidebar>

Multi-level dropdown

Use this sidebar example to create multi-level menu items by using the dSidebarDropdownWrapper and SidebarDropdownItem components.

<Sidebar>
  <SidebarWrapper>
    <SidebarGroup>
      <SidebarItem label="Dashboard" icon={{ name: ChartPie }} />
      <SidebarDropdownWrapper label="E-commerce" icon={{ name: ShoppingCart }}>
        <SidebarDropdownItem label="Products" />
        <SidebarDropdownItem label="Billing" />
        <SidebarDropdownItem label="Invoice" />
      </SidebarDropdownWrapper>

      <SidebarItem label="Kanban" {spanClass} icon={{ name: ViewGrid }}>
        <svelte:fragment slot="subtext">
          <span
            class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300"
            >Pro</span
          >
        </svelte:fragment>
      </SidebarItem>
      <SidebarItem label="Inbox" {spanClass} icon={{ name: InboxIn }}>
        <svelte:fragment slot="subtext">
          <span
            class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
            >3</span
          >
        </svelte:fragment>
      </SidebarItem>
      <SidebarItem label="Users" icon={{ name: User }} />
      <SidebarItem label="Sign In" icon={{ name: Login }} />
      <SidebarItem label="Sign Up" icon={{ name: Cog }} />
    </SidebarGroup>
  </SidebarWrapper>
</Sidebar>

Content separator

Separate the content inside the sidebar component by applying a border separator to the SidebarGroup component.

<Sidebar>
  <SidebarWrapper>
    <SidebarGroup>
      <SidebarItem label="Dashboard" icon={{ name: ChartPie }} />
      <SidebarItem label="Kanban" {spanClass} icon={{ name: ViewGrid }}>
        <svelte:fragment slot="subtext">
          <span
            class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300"
            >Pro</span
          >
        </svelte:fragment>
      </SidebarItem>
      <SidebarItem label="Inbox" {spanClass} icon={{ name: InboxIn }}>
        <svelte:fragment slot="subtext">
          <span
            class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
            >3</span
          >
        </svelte:fragment>
      </SidebarItem>
      <SidebarItem label="Users" icon={{ name: User }} />
      <SidebarItem label="Sign In" icon={{ name: Login }} />
      <SidebarItem label="Sign Up" icon={{ name: Cog }} />
    </SidebarGroup>
    <SidebarGroup border>
      <SidebarItem label="Upgrade to Pro" icon={{ name: Star }} />
      <SidebarItem label="Documentation" icon={{ name: ClipboardList }} />
      <SidebarItem label="Components" icon={{ name: Collection }} />
      <SidebarItem label="Help" icon={{ name: Support }} />
    </SidebarGroup>
  </SidebarWrapper>
</Sidebar>

CTA button

Use this example to add a CTA button inside the sidebar component and encourage your users to visit the dedicated page.

<Sidebar>
  <SidebarWrapper>
    <SidebarGroup>
      <SidebarItem label="Dashboard" icon={{ name: ChartPie }} />
      <SidebarItem label="Kanban" {spanClass} icon={{ name: ViewGrid }}>
        <svelte:fragment slot="subtext">
          <span
            class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300"
            >Pro</span
          >
        </svelte:fragment>
      </SidebarItem>
      <SidebarItem label="Inbox" {spanClass} icon={{ name: InboxIn }}>
        <svelte:fragment slot="subtext">
          <span
            class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
            >3</span
          >
        </svelte:fragment>
      </SidebarItem>
      <SidebarItem label="Users" icon={{ name: User }} />
      <SidebarItem label="Sign In" icon={{ name: Login }} />
      <SidebarItem label="Sign Up" icon={{ name: Cog }} />
      <SidebarCta label="Beta">
        <svelte:fragment slot="icon">
          <button
            type="button"
            class="ml-auto -mx-1.5 -my-1.5 bg-blue-50 text-blue-900 rounded-lg focus:ring-2 focus:ring-blue-400 p-1 hover:bg-blue-200 inline-flex h-6 w-6 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-800"
            data-collapse-toggle="dropdown-cta"
            aria-label="Close"
          >
            <span class="sr-only">Close</span>
            <X />
          </button>
        </svelte:fragment>
        <p class="mb-3 text-sm text-blue-900 dark:text-blue-400">
          Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a
          limited time in your profile.
        </p>
        <a
          class="text-sm text-blue-900 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
          href="/">Turn new navigation off</a
        >
      </SidebarCta>
    </SidebarGroup>
  </SidebarWrapper>
</Sidebar>

Logo branding

Show the logo of your brand and link back to the homepage from the top part of the sidebar.

<script>
  import { Sidebar, SidebarWrapper, SidebarBrand, SidebarItem }
  let site = {
    name: 'Flowbite-Svelte',
    href: '/',
    img: '/images/flowbite-svelte-icon-logo.svg'
  };
<script>

<Sidebar>
  <SidebarWrapper>
    <SidebarGroup>
      <SidebarBrand {site} />
      <SidebarItem label="Dashboard" icon={{ name: ChartPie }} />
      <SidebarItem label="Kanban" {spanClass} icon={{ name: ViewGrid }}>
        <svelte:fragment slot="subtext">
          <span
            class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300"
            >Pro</span
          >
        </svelte:fragment>
      </SidebarItem>
      <SidebarItem label="Inbox" {spanClass} icon={{ name: InboxIn }}>
        <svelte:fragment slot="subtext">
          <span
            class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
            >3</span
          >
        </svelte:fragment>
      </SidebarItem>
      <SidebarItem label="Users" icon={{ name: User }} />
      <SidebarItem label="Sign In" icon={{ name: Login }} />
      <SidebarItem label="Sign Up" icon={{ name: Cog }} />
    </SidebarGroup>
  </SidebarWrapper>
</Sidebar>

Props

The component has the following props, type, and default values. See types page for type information.

Sidebar

Name	Type	Default
asideClass	string	'w-64'

SidebarBrand

Name	Type	Default
site	SiteType
aClass	string	'flex items-center pl-2.5 mb-5'
imgClass	string	'h-6 mr-3 sm:h-7'
spanClass	string	'self-center text-xl font-semibold whitespace-nowrap dark:text-white'

SidebarCta

Name	Type	Default
divWrapperClass	string	'p-4 mt-6 bg-blue-50 rounded-lg dark:bg-blue-900'
divClass	string	'flex items-center mb-3'
spanClass	string	'bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900'
label	string	''

SidebarDropdownItem

Name	Type	Default
aClass	string	'flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700'
href	string	''
label	string	''

SidebarDropdownWrapper

Name	Type	Default
btnClass	string	'flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700'
label	string	''
spanClass	string	'flex-1 ml-3 text-left whitespace-nowrap'
ulClass	string	'py-2 space-y-2'
icon	IconType

SidebarGroup

Name	Type	Default
ulClass	string	'space-y-2'
borderClass	string	'pt-4 mt-4 border-t border-gray-200 dark:border-gray-700'
border	boolean	false

SidebarItem

Name	Type	Default
aClass	string	'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700'
href	string	''
label	string	''
spanClass	string	'ml-3'
icon	IconType

SidebarWrapper

Name	Type	Default
divClass	string	'overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800'

Forwarded Events: SidebarDropdownItem, SidebarItem

on:blur on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover

References

Flowbite Sidebar