Breadcrumb

A navigation aid that allows users to keep track of their location within programs, documents, or websites.

Props

Prop	Type	Default	Description
`items`	`Array<{ label: string; href: string }>`	`[]`	An array of breadcrumb items.
`separator`	`string \| Snippet`	`'/'`	The separator element between items.
`variant`	`string`	`''`	Custom variant class for theming.
`componentId`	`string`	`crypto.randomUUID()`	The unique identifier for the component wrapper.

A navigation aid that allows users to keep track of their location within programs, documents, or websites.

Standard breadcrumb with default separator.

<script>

  import { Breadcrumb } from 'fluid-ui-svelte/components';

  const items = [

    { label: 'Home', href: '/' },

    { label: 'Components', href: '/documentation/components' },

    { label: 'Breadcrumb', href: '/documentation/components/breadcrumb' }

];

</script>

<Breadcrumb {items} />

You can provide a custom string or snippet as a separator.

<script>

  import { Breadcrumb } from 'fluid-ui-svelte/components';

</script>

<Breadcrumb

  {items}

  separator=">"

/>