Skip to content
Destyler UI Destyler UI Destyler UI
Docs
Breadcrumbs

Breadcrumbs

Show hierarchy and navigational context for a user’s location within an application.

Features

Install

Install the component from your command line.

Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/{breadcrumbs,vue}
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/{breadcrumbs,react}
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/{breadcrumbs,svelte}
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/{breadcrumbs,solid}

Anatomy

Import all parts and piece them together.

<script setup lang="ts">
import type { BreadcrumbItem } from '@destyler/breadcrumbs'
import * as breadcrumbs from '@destyler/breadcrumbs'
import { normalizeProps, useMachine } from '@destyler/vue'
import { computed, useId } from 'vue'


const [state, send] = useMachine(breadcrumbs.machine({
  id: useId(),
}))
const api = computed(() => breadcrumbs.connect(state.value, send, normalizeProps))
</script>


<template>
  <nav v-bind="api.getRootProps()">
    <ol v-bind="api.getListProps()">
      <li v-bind="api.getItemProps('item')" >
        <a v-bind="api.getLinkProps('item')" ></a>
        <span v-if="item.href" v-bind="api.getSeparatorProps()" ></span>
      </li>
    </ol>
  </nav>
</template>
import type { BreadcrumbItem } from '@destyler/breadcrumbs'
import * as breadcrumbs from '@destyler/breadcrumbs'
import { normalizeProps, useMachine } from '@destyler/react'
import { useId } from 'react'


export default function Breadcrumbs() {


  const [state, send] = useMachine(
    breadcrumbs.machine({
      id: useId(),
    }),
  )


  const api = breadcrumbs.connect(state, send, normalizeProps)


  return (
    <nav {...api.getRootProps()}>
      <ol {...api.getListProps()}>
        <li {...api.getItemProps('item')}>
          <a {...api.getLinkProps('item')}></a>
          <span {...api.getSeparatorProps()} />
        </li>
      </ol>
    </nav>
  )
}
<script lang="ts">
  import type { BreadcrumbItem } from '@destyler/breadcrumbs'
  import * as breadcrumbs from '@destyler/breadcrumbs'
  import { normalizeProps, useMachine } from '@destyler/svelte'


  const uid = $props.id();


  const [state, send] = useMachine(breadcrumbs.machine({
    id: uid,
  }))


  const api = $derived(breadcrumbs.connect(state, send, normalizeProps))
</script>


<nav {...api.getRootProps()}>
  <ol {...api.getListProps()}>
    <li {...api.getItemProps('item')} >
      <a {...api.getLinkProps('item')} ></a>
      <span {...api.getSeparatorProps()}></span>
    </li>
  </ol>
</nav>
import type { BreadcrumbItem } from '@destyler/breadcrumbs'
import * as breadcrumbs from '@destyler/breadcrumbs'
import { normalizeProps, useMachine } from '@destyler/solid'
import { createMemo, createUniqueId, For } from 'solid-js'


export default function Breadcrumbs() {


  const [state, send] = useMachine(
    breadcrumbs.machine({
      id: createUniqueId(),
    }),
  )


  const api = createMemo(() => breadcrumbs.connect(state, send, normalizeProps))


  return (
    <nav {...api().getRootProps()}>
      <ol {...api().getListProps()}>
        <li {...api().getItemProps('item')}>
          <a {...api().getLinkProps('item')}></a>
          <span {...api().getSeparatorProps()}></span>
        </li>
      </ol>
    </nav>
  )
}

Set Breadcrumb Item

const [state, send] = useMachine(
  breadcrumbs.machine({
    id: createUniqueId(),
    items:[
      { id: '1', label: 'Home', href: '/' },
      { id: '2', label: 'Components', href: '/components/checkbox' },
      { id: '3', label: 'Breadcrumbs' },
    ],
  }),
)

Styling Guide

Earlier, we mentioned that each checkbox part has a data-part attribute added to them to select and style them in the DOM.

[data-part="root"] {
  /* styles for root */
}
[data-part="list"]{
  /* styles for list */
}
[data-part="item"]{
  /* styles for item */
}
[data-part="link"]{
  /* styles for link */
}
[data-part="separator"]{
  /* styles for separator */
}

Current page state

The current page is the last item in the breadcrumb list. It is not a link and has a aria-current attribute set to page.

[data-part="link"][data-current="page"] {
  /* styles for current page */
}

Methods and Properties

Machine Context

The breadcrumbs machine exposes the following context properties:

ids
Partial<{ root: string; list: string; separator: string; }>
The ids of the elements in the collapsible. Useful for composition.
items
{id: string; label: string; href?: string;}[]
The items of the breadcrumbs.

Machine API

The breadcrumbs api exposes the following methods:

items
{id: string; label: string; href?: string;}[]
The items of the breadcrumbs.

Data Attributes

Root

name
desc
data-scope
breadcrumbs
data-part
root

List

name
desc
data-scope
breadcrumbs
data-part
list

Item

name
desc
data-scope
breadcrumbs
data-part
item
name
desc
data-scope
breadcrumbs
data-part
link
data-current
page

Separator

name
desc
data-scope
breadcrumbs
data-part
separator

Aspect Ratio

Carousel