Breadcrumb

Shows where the current page sits in the product, with a link to each level above it.

<script setup lang="ts">
import { type BreadcrumbItem, FsBreadcrumb } from '@fivespark/ui'

const items: BreadcrumbItem[] = [
  { label: 'Contracten', to: '/contracten' },
  { label: 'Acme BV', to: '/contracten/acme' },
  { label: 'Raamovereenkomst 2026' },
]
</script>

<template>
  <FsBreadcrumb :items />
</template>

Usage

<script setup lang="ts">
import { FsBreadcrumb } from '@fivespark/ui'
</script>

<template>
  <FsBreadcrumb :items="[{ label: 'Contracten', to: '/contracten' }, { label: 'Acme BV' }]" />
</template>

List the trail from the top down. Every item but the last needs a to or an href; the last one is the current page and is not a link. To move between sibling pages, use Pagination or Tabs.

Examples

With href

Use href for a plain address, to for a router location.

<script setup lang="ts">
import { type BreadcrumbItem, FsBreadcrumb } from '@fivespark/ui'

const items: BreadcrumbItem[] = [
  { label: 'Start', href: '/' },
  { label: 'Orders', href: '/orders' },
  { label: 'Order 2026-0412' },
]
</script>

<template>
  <FsBreadcrumb :items />
</template>

Above the page title

The trail sits above the heading it leads to, and its last item repeats the title. A page with two trails gives each its own aria-label.

<script setup lang="ts">
import { type BreadcrumbItem, FsBreadcrumb } from '@fivespark/ui'

const items: BreadcrumbItem[] = [
  { label: 'Start', to: '/' },
  { label: 'Contracten', to: '/contracten' },
  { label: 'Raamovereenkomst 2026' },
]
</script>

<template>
  <div class="flex flex-col gap-2">
    <FsBreadcrumb :items />
    <h1 class="type-page-title text-text">Raamovereenkomst 2026</h1>
  </div>
</template>

API Reference

FsBreadcrumb

Prop	Type	Default	Description
items	BreadcrumbItem[]	required	The trail, from the top of the hierarchy down to the current page, which is the last item. Every item before it needs a `to` or an `href`.