Qwik breadcrumb - Flowbite

Get started with the breadcrumb component to show the current page location based on the URL structure using Qwik and Tailwind CSS

The breadcrumb component can be used to indicate the current page's location within a navigational hierarchy and you can choose from multiple examples, colors, and sizes built with Qwik and based on the utility classes from Tailwind CSS.

To start using the breadcrumb component you need to import it from flowbite-qwik :

import { Breadcrumb } from "flowbite-qwik"

Default Breadcrumb

Use the following breadcrumb example to show the hierarchical structure of pages.

tsx
import { component$ } from '@builder.io/qwik'
import { Breadcrumb } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="p-3">
      <Breadcrumb>
        <Breadcrumb.Item home href="#">
          Home
        </Breadcrumb.Item>
        <Breadcrumb.Item href="#">Projects</Breadcrumb.Item>
        <Breadcrumb.Item>Flowbite</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  )
})

Solid Breadcrumb

You can alternatively also use the breadcrumb components with a solid background.

tsx
import { component$ } from '@builder.io/qwik'
import { Breadcrumb } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="p-3">
      <Breadcrumb solid>
        <Breadcrumb.Item home href="#">
          Home
        </Breadcrumb.Item>
        <Breadcrumb.Item href="#">Projects</Breadcrumb.Item>
        <Breadcrumb.Item>Flowbite</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  )
})

Breadcrumb with Custom Icons

You can customize the icons for the home and arrow icons in the breadcrumb component.

tsx
import { component$ } from '@builder.io/qwik'
import { Breadcrumb } from 'flowbite-qwik'
import { IconArrowLeftOutline, IconBarsOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <div class="p-3">
      <Breadcrumb solid>
        <Breadcrumb.Item home href="#" homeIcon={IconBarsOutline}>
          Home
        </Breadcrumb.Item>
        <Breadcrumb.Item href="#" arrowIcon={IconArrowLeftOutline}>
          Projects
        </Breadcrumb.Item>
        <Breadcrumb.Item arrowIcon={IconArrowLeftOutline}>Flowbite</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  )
})