Skip to content

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
<script setup>
import { Breadcrumb } from 'flowbite-vue'
</script>
<template>
<Breadcrumb>
  <BreadcrumbItem href="#" home>
    Home
  </BreadcrumbItem>
  <BreadcrumbItem href="#">
    Projects
  </BreadcrumbItem>
  <BreadcrumbItem>
    Flowbite
  </BreadcrumbItem>
</Breadcrumb>
</template>
<script setup>
import { Breadcrumb } from 'flowbite-vue'
</script>
<template>
<Breadcrumb>
  <BreadcrumbItem href="#" home>
    Home
  </BreadcrumbItem>
  <BreadcrumbItem href="#">
    Projects
  </BreadcrumbItem>
  <BreadcrumbItem>
    Flowbite
  </BreadcrumbItem>
</Breadcrumb>
</template>

Solid Breadcrumb

vue
<script setup>
import { Breadcrumb } from 'flowbite-vue'
</script>
<template>
<Breadcrumb solid>
  <BreadcrumbItem href="#" home>
    Home
  </BreadcrumbItem>
  <BreadcrumbItem href="#">
    Projects
  </BreadcrumbItem>
  <BreadcrumbItem>
    Flowbite
  </BreadcrumbItem>
</Breadcrumb>
</template>
<script setup>
import { Breadcrumb } from 'flowbite-vue'
</script>
<template>
<Breadcrumb solid>
  <BreadcrumbItem href="#" home>
    Home
  </BreadcrumbItem>
  <BreadcrumbItem href="#">
    Projects
  </BreadcrumbItem>
  <BreadcrumbItem>
    Flowbite
  </BreadcrumbItem>
</Breadcrumb>
</template>

Custom Icons

Released under the MIT License.