Svelte Breadcrumb - Flowbite
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 #
- Svelte
<script>
import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
</script>Default Breadcrumb #
Use the following breadcrumb example to show the hierarchical structure of pages.
- Svelte
<Breadcrumb aria-label="Default breadcrumb example">
<BreadcrumbItem href="/" home>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.
- Svelte
<Breadcrumb aria-label="Solid background breadcrumb example" solid>
<BreadcrumbItem href="/" home>Home</BreadcrumbItem>
<BreadcrumbItem href="/">Projects</BreadcrumbItem>
<BreadcrumbItem>Flowbite Svelte</BreadcrumbItem>
</Breadcrumb>Icons #
Use the icon slot to change icons.
- Svelte
<Breadcrumb aria-label="Solid background breadcrumb example" class="bg-gray-50 py-3 px-5 dark:bg-gray-900">
<BreadcrumbItem href="/" home>
<svelte:fragment slot="icon">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
</svelte:fragment>Home</BreadcrumbItem>
<BreadcrumbItem href="/">
<svelte:fragment slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 dark:text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
</svg>
</svelte:fragment>
Projects</BreadcrumbItem>
<BreadcrumbItem>
<svelte:fragment slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 dark:text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
</svg>
</svelte:fragment>
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 |
|---|---|---|
| solid | boolean | false |
| navClass | string | 'flex' |
| solidClass | string | 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700' |
| olClass | string | 'inline-flex items-center space-x-1 md:space-x-3' |
BreadcrumbItem #
| Name | Type | Default |
|---|---|---|
| home | boolean | false |
| href | string | undefined | undefined |
| linkClass | string | 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white' |
| spanClass | string | 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400' |
| homeClass | string | 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white' |