flowbite-vue/docs/components/breadcrumb.md

<script setup> import FwbBreadcrumbExample from './breadcrumb/examples/FwbBreadcrumbExample.vue' import FwbBreadcrumbExampleSolid from './breadcrumb/examples/FwbBreadcrumbExampleSolid.vue' import FwbBreadcrumbExampleCustomIcons from './breadcrumb/examples/FwbBreadcrumbExampleCustomIcons.vue' </script>

Vue Breadcrumb - Flowbite

The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.

Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors.

Default breadcrumb

```vue Home Projects Flowbite <script setup> import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue' </script>

## Solid Breadcrumb

<fwb-breadcrumb-example-solid />
```vue
<template>
  <fwb-breadcrumb solid>
    <fwb-breadcrumb-item home href="#">
      Home
    </fwb-breadcrumb-item>
    <fwb-breadcrumb-item href="#">
      Projects
    </fwb-breadcrumb-item>
    <fwb-breadcrumb-item>
      Flowbite
    </fwb-breadcrumb-item>
  </fwb-breadcrumb>
</template>

<script setup>
import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue'
</script>

Custom Icons

```vue Home Projects Flowbite <script setup> import { FwbBreadcrumb, FwbBreadcrumbItem } from 'flowbite-vue' </script>