Breadcrumb

Show the location of the current page in a hierarchical structure using the breadcrumb components

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.

Setup

<script>
	import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
</script>

Default Breadcrumb

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

<Breadcrumb aria-label="Default breadcrumb example">
  <BreadcrumbItem href="/" icon={Home} variation="solid">Home</BreadcrumbItem>
  <BreadcrumbItem href="/">Projects</BreadcrumbItem>
  <BreadcrumbItem>Flowbite Svelte</BreadcrumbItem>
</Breadcrumb>

Solid Breadcrumb

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

<Breadcrumb aria-label="Solid background breadcrumb example" class="bg-gray-50 py-3 px-5 dark:bg-gray-900">
  <BreadcrumbItem href="/" icon={Home} variation="solid">Home</BreadcrumbItem>
  <BreadcrumbItem href="/">Projects</BreadcrumbItem>
  <BreadcrumbItem>Flowbite Svelte</BreadcrumbItem>
</Breadcrumb>

Props

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

Breadcrumb

BreadcrumbItem

References