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 @destyler/vue
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/breadcrumbs @destyler/react
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/breadcrumbs @destyler/svelte
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/breadcrumbs @destyler/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:

items
BreadcrumbItem[]
面包屑项目
ids
Partial<{ root: string; list: string; separator: string; }>
DOM 元素的 ID
id
string
The unique identifier of the machine.
getRootNode
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
dir(default: "ltr")
"ltr" | "rtl"
The document's text/writing direction.

Machine API

The breadcrumbs api exposes the following methods:

Unable to load API property information for "breadcrumbs"

Data Attributes

Root

none

List

none

Item

attribute
description
data-scope
breadcrumbs
data-part
item
data-hover
Present when hovered
data-focus
Present when focused
attribute
description
data-scope
breadcrumbs
data-part
link
data-current
Present when current
data-hover
Present when hovered
data-focus
Present when focused

Separator

none

Aspect Ratio

Collapse