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
Name | Type | Default |
---|---|---|
navClass | string | 'flex' |
olClass | string | 'inline-flex items-center space-x-1 md:space-x-3' |
BreadcrumbItem
Name | Type | Default |
---|---|---|
icon | typeof SvelteComponent | null | null |
variation | 'solid' | null | null |
iconSize | number | 20 |
iconClass | string | 'mr-2' |