Qwik sidebar - Flowbite

Use the sidebar component to show a list of menu items including multi-level dropdown menu on the left or right side of your page for admin dashboards and applications

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 Qwik 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 flowbite-qwik :

import { Sidebar } from "flowbite-qwik"

Default sidebar

Use this example to show a list of navigation menu items by adding <Sidebar.Item> children components inside the <Sidebar> component and pass the href prop to set a URL and icon to apply any icons from the flowbite-qwik-icons icon library. You can also add a text label as a badge by using the label prop from Qwik and the labelColor to set the color of the label background.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Sidebar } from 'flowbite-qwik'
import { IconHomeOutline, IconInboxOutline, IconUserCircleOutline, IconShoppingBagOutline, IconChartBars3FromLeftSolid } from 'flowbite-qwik-icons'

export default component$(() => {
  const collapsed = useSignal(false)

  return (
    <div class="p-3">
      <button
        onClick$={() => {
          collapsed.value = true
        }}
        type="button"
        class="ms-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 sm:hidden"
      >
        <span class="sr-only">Open sidebar</span>
        <IconChartBars3FromLeftSolid aria-hidden class="h-4 w-4 shrink-0" />
      </button>
      <Sidebar highlight collapsed={collapsed}>
        <Sidebar.ItemGroup>
          <Sidebar.Item icon={IconHomeOutline}>Dashboard</Sidebar.Item>
          <Sidebar.Item icon={IconInboxOutline}>inbox</Sidebar.Item>
          <Sidebar.Item icon={IconUserCircleOutline}>Users</Sidebar.Item>
          <Sidebar.Item icon={IconShoppingBagOutline}>Products</Sidebar.Item>
        </Sidebar.ItemGroup>
      </Sidebar>
    </div>
  )
})

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.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Sidebar } from 'flowbite-qwik'
import {
  IconHomeOutline,
  IconInboxOutline,
  IconUserCircleOutline,
  IconShoppingBagOutline,
  IconFileEditSolid,
  IconAdressBookOutline,
  IconGearSolid,
  IconAtomSolid,
  IconAdjustmentsHorizontalSolid,
  IconChartBars3FromLeftSolid,
} from 'flowbite-qwik-icons'

export default component$(() => {
  const collapsed = useSignal(false)

  return (
    <div class="p-3">
      <button
        onClick$={() => {
          collapsed.value = true
        }}
        type="button"
        class="ms-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 sm:hidden"
      >
        <span class="sr-only">Open sidebar</span>
        <IconChartBars3FromLeftSolid aria-hidden class="h-4 w-4 shrink-0" />
      </button>
      <Sidebar collapsed={collapsed}>
        <Sidebar.ItemGroup>
          <Sidebar.Item icon={IconHomeOutline}>Dashboard</Sidebar.Item>
          <Sidebar.Item icon={IconInboxOutline}>inbox</Sidebar.Item>
          <Sidebar.Item icon={IconUserCircleOutline}>Users</Sidebar.Item>
          <Sidebar.Item icon={IconShoppingBagOutline}>Products</Sidebar.Item>
        </Sidebar.ItemGroup>

        <Sidebar.ItemGroup>
          <Sidebar.Item icon={IconFileEditSolid}>Documentation</Sidebar.Item>
          <Sidebar.Item icon={IconAdressBookOutline}>Help</Sidebar.Item>
          <Sidebar.Item icon={IconGearSolid}>Settings</Sidebar.Item>
          <Sidebar.Item icon={IconAtomSolid}>Details</Sidebar.Item>

          <Sidebar.Collapse label="Collapse" icon={IconAdjustmentsHorizontalSolid}>
            <Sidebar.Item>Dashboard</Sidebar.Item>
            <Sidebar.Item>inbox</Sidebar.Item>
            <Sidebar.Item>Users</Sidebar.Item>
            <Sidebar.Item>Products</Sidebar.Item>
          </Sidebar.Collapse>
        </Sidebar.ItemGroup>
      </Sidebar>
    </div>
  )
})

With CTA

This example can be used to show a call to action button inside the sidebar next to the menu items.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Sidebar, Badge } from 'flowbite-qwik'
import {
  IconHomeOutline,
  IconInboxOutline,
  IconUserCircleOutline,
  IconShoppingBagOutline,
  IconFileEditSolid,
  IconAdressBookOutline,
  IconGearSolid,
  IconAtomSolid,
  IconAdjustmentsHorizontalSolid,
  IconChartBars3FromLeftSolid,
} from 'flowbite-qwik-icons'

export default component$(() => {
  const isCtaVisible = useSignal(true)
  const collapsed = useSignal(false)

  return (
    <div class="p-3">
      <button
        onClick$={() => {
          collapsed.value = true
        }}
        type="button"
        class="ms-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 sm:hidden"
      >
        <span class="sr-only">Open sidebar</span>
        <IconChartBars3FromLeftSolid />
      </button>
      <Sidebar highlight collapsed={collapsed}>
        <Sidebar.ItemGroup>
          <Sidebar.Item icon={IconHomeOutline}>Dashboard</Sidebar.Item>
          <Sidebar.Item icon={IconInboxOutline}>inbox</Sidebar.Item>
          <Sidebar.Item icon={IconUserCircleOutline}>Users</Sidebar.Item>
          <Sidebar.Item icon={IconShoppingBagOutline}>Products</Sidebar.Item>
        </Sidebar.ItemGroup>

        <Sidebar.ItemGroup>
          <Sidebar.Item icon={IconFileEditSolid}>Documentation</Sidebar.Item>
          <Sidebar.Item icon={IconAdressBookOutline}>Help</Sidebar.Item>
          <Sidebar.Item icon={IconGearSolid}>Settings</Sidebar.Item>
          <Sidebar.Item icon={IconAtomSolid}>Details</Sidebar.Item>

          <Sidebar.Collapse label="Collapse" icon={IconAdjustmentsHorizontalSolid}>
            <Sidebar.Item>Dashboard</Sidebar.Item>
            <Sidebar.Item>inbox</Sidebar.Item>
            <Sidebar.Item>Users</Sidebar.Item>
            <Sidebar.Item>Products</Sidebar.Item>
          </Sidebar.Collapse>
        </Sidebar.ItemGroup>
        {isCtaVisible.value && (
          <Sidebar.Cta onClose$={() => (isCtaVisible.value = false)}>
            <Badge q:slot="badge" type="yellow" content="new" />

            <p class="mb-3 text-sm text-blue-800 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 font-medium text-blue-800 underline hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" href="#">
              Turn new navigation off
            </a>
          </Sidebar.Cta>
        )}
      </Sidebar>
    </div>
  )
})

Sidebar with navbar

Use this example to show a navbar together with a sidebar layout for your web application.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Sidebar } from 'flowbite-qwik'
import {
  IconHomeOutline,
  IconInboxOutline,
  IconUserCircleOutline,
  IconShoppingBagOutline,
  IconCloseSolid,
  IconChartBars3FromLeftSolid,
} from 'flowbite-qwik-icons'
import { NavbarPage } from '~/components/NavbarPage/NavbarPage'

export default component$(() => {
  const collapsed = useSignal(false)

  return (
    <>
      <NavbarPage>
        <button
          q:slot="action"
          class="sm:hidden"
          onClick$={() => {
            collapsed.value = !collapsed.value
          }}
        >
          {collapsed.value ? <IconCloseSolid class="size-5" /> : <IconChartBars3FromLeftSolid class="size-5" />}
          <span class="sr-only">Open sidebar</span>
        </button>
      </NavbarPage>

      <Sidebar
        collapsed={collapsed}
        highlight
        theme={{
          nav: 'pt-20',
        }}
      >
        <Sidebar.ItemGroup>
          <Sidebar.Item icon={IconHomeOutline}>Dashboard</Sidebar.Item>
          <Sidebar.Item icon={IconInboxOutline}>inbox</Sidebar.Item>
          <Sidebar.Item icon={IconUserCircleOutline}>Users</Sidebar.Item>
          <Sidebar.Item icon={IconShoppingBagOutline}>Products</Sidebar.Item>
        </Sidebar.ItemGroup>
      </Sidebar>
    </>
  )
})