Breadcrumbs

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

<script setup lang="ts">
import { Breadcrumbs } from '@destyler-ui/vue'

const items = [
  { id: '1', label: 'Home', href: '/' },
  { id: '2', label: 'Products', href: '/products' },
  { id: '3', label: 'Electronics', href: '/products/electronics' },
  { id: '4', label: 'Smartphones' },
]
</script>

<template>
  <main>
    <Breadcrumbs.Root :items="items">
      <Breadcrumbs.List>
        <Breadcrumbs.Context v-slot="breadcrumbs">
          <Breadcrumbs.Item v-for="item in breadcrumbs.items" :key="item.id" :item="item">
            <Breadcrumbs.Link :item="item">{{ item.label }}</Breadcrumbs.Link>
            <Breadcrumbs.Separator v-if="item.href">/</Breadcrumbs.Separator>
          </Breadcrumbs.Item>
        </Breadcrumbs.Context>
      </Breadcrumbs.List>
    </Breadcrumbs.Root>
  </main>
</template>

import { Breadcrumbs } from '@destyler-ui/react'

const items = [
  { id: '1', label: 'Home', href: '/' },
  { id: '2', label: 'Products', href: '/products' },
  { id: '3', label: 'Electronics', href: '/products/electronics' },
  { id: '4', label: 'Smartphones' },
]

export function Basic() {
  return (
    <main>
      <Breadcrumbs.Root items={items}>
        <Breadcrumbs.List>
          <Breadcrumbs.Context>
            {breadcrumbs =>
              breadcrumbs.items.map(item => (
                <Breadcrumbs.Item key={item.id} item={item}>
                  <Breadcrumbs.Link item={item}>{item.label}</Breadcrumbs.Link>
                  {item.href && <Breadcrumbs.Separator>/</Breadcrumbs.Separator>}
                </Breadcrumbs.Item>
              ))}
          </Breadcrumbs.Context>
        </Breadcrumbs.List>
      </Breadcrumbs.Root>
    </main>
  )
}

import { Breadcrumbs } from '@destyler-ui/solid/breadcrumbs'
import { For, Show } from 'solid-js'

const items = [
  { id: '1', label: 'Home', href: '/' },
  { id: '2', label: 'Products', href: '/products' },
  { id: '3', label: 'Electronics', href: '/products/electronics' },
  { id: '4', label: 'Smartphones' },
]

export function Basic() {
  return (
    <main>
      <Breadcrumbs.Root items={items}>
        <Breadcrumbs.List>
          <Breadcrumbs.Context>
            {breadcrumbs => (
              <For each={breadcrumbs().items}>
                {item => (
                  <Breadcrumbs.Item item={item}>
                    <Breadcrumbs.Link item={item}>{item.label}</Breadcrumbs.Link>
                    <Show when={item.href}>
                      <Breadcrumbs.Separator>/</Breadcrumbs.Separator>
                    </Show>
                  </Breadcrumbs.Item>
                )}
              </For>
            )}
          </Breadcrumbs.Context>
        </Breadcrumbs.List>
      </Breadcrumbs.Root>
    </main>
  )
}

<script lang="ts">
  import { Breadcrumbs } from '@destyler-ui/svelte'

  const items = [
    { id: '1', label: 'Home', href: '/' },
    { id: '2', label: 'Products', href: '/products' },
    { id: '3', label: 'Electronics', href: '/products/electronics' },
    { id: '4', label: 'Smartphones' },
  ]
</script>

<main>
  <Breadcrumbs.Root {items}>
    <Breadcrumbs.List>
      <Breadcrumbs.Context>
        {#snippet render(breadcrumbs)}
          {#each breadcrumbs().items as item (item.id)}
            <Breadcrumbs.Item {item}>
              <Breadcrumbs.Link {item}>{item.label}</Breadcrumbs.Link>
              {#if item.href}<Breadcrumbs.Separator>/</Breadcrumbs.Separator>{/if}
            </Breadcrumbs.Item>
          {/each}
        {/snippet}
      </Breadcrumbs.Context>
    </Breadcrumbs.List>
  </Breadcrumbs.Root>
</main>

Anatomy

<script setup lang="ts">
import { Breadcrumbs } from '@destyler-ui/vue'
</script>

<template>
  <Breadcrumbs.Root :items="items">
    <Breadcrumbs.List>
      <Breadcrumbs.Context v-slot="breadcrumbs">
        <Breadcrumbs.Item v-for="item in breadcrumbs.items" :key="item.id" :item="item">
          <Breadcrumbs.Link :item="item">{{ item.label }}</Breadcrumbs.Link>
          <Breadcrumbs.Separator v-if="item.href">/</Breadcrumbs.Separator>
        </Breadcrumbs.Item>
      </Breadcrumbs.Context>
    </Breadcrumbs.List>
  </Breadcrumbs.Root>
</template>

import { Breadcrumbs } from '@destyler-ui/react'

export function Basic() {
  return (
    <Breadcrumbs.Root items={items}>
      <Breadcrumbs.List>
        <Breadcrumbs.Context>
          {breadcrumbs =>
            breadcrumbs.items.map(item => (
              <Breadcrumbs.Item key={item.id} item={item}>
                <Breadcrumbs.Link item={item}>{item.label}</Breadcrumbs.Link>
                {item.href && <Breadcrumbs.Separator>/</Breadcrumbs.Separator>}
              </Breadcrumbs.Item>
            ))}
        </Breadcrumbs.Context>
      </Breadcrumbs.List>
    </Breadcrumbs.Root>
  )
}

import { Breadcrumbs } from '@destyler-ui/solid'
import { For, Show } from 'solid-js'

const items = [
  { id: 'home', label: 'Home', href: '/' },
  { id: 'docs', label: 'Docs' },
]

export function Basic() {
  return (
    <Breadcrumbs.Root items={items}>
      <Breadcrumbs.List>
        <Breadcrumbs.Context>
          {breadcrumbs => (
            <For each={breadcrumbs().items}>
              {item => (
                <Breadcrumbs.Item item={item}>
                  <Breadcrumbs.Link item={item}>{item.label}</Breadcrumbs.Link>
                  <Show when={item.href}>
                    <Breadcrumbs.Separator>/</Breadcrumbs.Separator>
                  </Show>
                </Breadcrumbs.Item>
              )}
            </For>
          )}
        </Breadcrumbs.Context>
      </Breadcrumbs.List>
    </Breadcrumbs.Root>
  )
}

<script lang="ts">
  import { Breadcrumbs } from '@destyler-ui/svelte'

  const items = [
    { id: '1', label: 'Home', href: '/' },
    { id: '2', label: 'Products', href: '/products' },
    { id: '3', label: 'Electronics', href: '/products/electronics' },
    { id: '4', label: 'Smartphones' },
  ]
</script>

<main>
  <Breadcrumbs.Root {items}>
    <Breadcrumbs.List>
      <Breadcrumbs.Context>
        {#snippet render(breadcrumbs)}
          {#each breadcrumbs().items as item (item.id)}
            <Breadcrumbs.Item {item}>
              <Breadcrumbs.Link {item}>{item.label}</Breadcrumbs.Link>
              {#if item.href}<Breadcrumbs.Separator>/</Breadcrumbs.Separator>{/if}
            </Breadcrumbs.Item>
          {/each}
        {/snippet}
      </Breadcrumbs.Context>
    </Breadcrumbs.List>
  </Breadcrumbs.Root>
</main>

Examples

Basic

Display a list of breadcrumb items showing the user’s navigation path.

<script setup lang="ts">
import { Breadcrumbs } from '@destyler-ui/vue'

const items = [
  { id: '1', label: 'Home', href: '/' },
  { id: '2', label: 'Products', href: '/products' },
  { id: '3', label: 'Electronics', href: '/products/electronics' },
  { id: '4', label: 'Smartphones' },
]
</script>

<template>
  <main>
    <Breadcrumbs.Root :items="items">
      <Breadcrumbs.List>
        <Breadcrumbs.Context v-slot="breadcrumbs">
          <Breadcrumbs.Item v-for="item in breadcrumbs.items" :key="item.id" :item="item">
            <Breadcrumbs.Link :item="item">{{ item.label }}</Breadcrumbs.Link>
            <Breadcrumbs.Separator v-if="item.href">/</Breadcrumbs.Separator>
          </Breadcrumbs.Item>
        </Breadcrumbs.Context>
      </Breadcrumbs.List>
    </Breadcrumbs.Root>
  </main>
</template>

import { Breadcrumbs } from '@destyler-ui/react'

const items = [
  { id: '1', label: 'Home', href: '/' },
  { id: '2', label: 'Products', href: '/products' },
  { id: '3', label: 'Electronics', href: '/products/electronics' },
  { id: '4', label: 'Smartphones' },
]

export function Basic() {
  return (
    <main>
      <Breadcrumbs.Root items={items}>
        <Breadcrumbs.List>
          <Breadcrumbs.Context>
            {breadcrumbs =>
              breadcrumbs.items.map(item => (
                <Breadcrumbs.Item key={item.id} item={item}>
                  <Breadcrumbs.Link item={item}>{item.label}</Breadcrumbs.Link>
                  {item.href && <Breadcrumbs.Separator>/</Breadcrumbs.Separator>}
                </Breadcrumbs.Item>
              ))}
          </Breadcrumbs.Context>
        </Breadcrumbs.List>
      </Breadcrumbs.Root>
    </main>
  )
}

import { Breadcrumbs } from '@destyler-ui/solid/breadcrumbs'
import { For, Show } from 'solid-js'

const items = [
  { id: '1', label: 'Home', href: '/' },
  { id: '2', label: 'Products', href: '/products' },
  { id: '3', label: 'Electronics', href: '/products/electronics' },
  { id: '4', label: 'Smartphones' },
]

export function Basic() {
  return (
    <main>
      <Breadcrumbs.Root items={items}>
        <Breadcrumbs.List>
          <Breadcrumbs.Context>
            {breadcrumbs => (
              <For each={breadcrumbs().items}>
                {item => (
                  <Breadcrumbs.Item item={item}>
                    <Breadcrumbs.Link item={item}>{item.label}</Breadcrumbs.Link>
                    <Show when={item.href}>
                      <Breadcrumbs.Separator>/</Breadcrumbs.Separator>
                    </Show>
                  </Breadcrumbs.Item>
                )}
              </For>
            )}
          </Breadcrumbs.Context>
        </Breadcrumbs.List>
      </Breadcrumbs.Root>
    </main>
  )
}

<script lang="ts">
  import { Breadcrumbs } from '@destyler-ui/svelte'

  const items = [
    { id: '1', label: 'Home', href: '/' },
    { id: '2', label: 'Products', href: '/products' },
    { id: '3', label: 'Electronics', href: '/products/electronics' },
    { id: '4', label: 'Smartphones' },
  ]
</script>

<main>
  <Breadcrumbs.Root {items}>
    <Breadcrumbs.List>
      <Breadcrumbs.Context>
        {#snippet render(breadcrumbs)}
          {#each breadcrumbs().items as item (item.id)}
            <Breadcrumbs.Item {item}>
              <Breadcrumbs.Link {item}>{item.label}</Breadcrumbs.Link>
              {#if item.href}<Breadcrumbs.Separator>/</Breadcrumbs.Separator>{/if}
            </Breadcrumbs.Item>
          {/each}
        {/snippet}
      </Breadcrumbs.Context>
    </Breadcrumbs.List>
  </Breadcrumbs.Root>
</main>

Context

Use Context to access the breadcrumbs state and customize rendering with icons and custom separators.

<script setup lang="ts">
import { Breadcrumbs } from '@destyler-ui/vue'

const items = [
  { id: '1', label: 'Dashboard', href: '/dashboard' },
  { id: '2', label: 'Settings', href: '/settings' },
  { id: '3', label: 'Profile' },
]
</script>

<template>
  <main>
    <Breadcrumbs.Root :items="items">
      <Breadcrumbs.List>
        <Breadcrumbs.Context v-slot="breadcrumbs">
          <output>
            <p>Hovered: {{ breadcrumbs.hoveredId || 'none' }}</p>
            <p>Focused: {{ breadcrumbs.focusedId || 'none' }}</p>
          </output>
          <div>
            <template v-for="(item, index) in breadcrumbs.items" :key="item.id">
              <Breadcrumbs.Item :item="item">
                <Breadcrumbs.Link :item="item">
                  <span v-if="index === 0">🏠</span>
                  {{ item.label }}
                </Breadcrumbs.Link>
                <Breadcrumbs.Separator v-if="item.href">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6" />
                  </svg>
                </Breadcrumbs.Separator>
              </Breadcrumbs.Item>
            </template>
          </div>
        </Breadcrumbs.Context>
      </Breadcrumbs.List>
    </Breadcrumbs.Root>
  </main>
</template>

import { useState } from 'react'
import { Breadcrumbs } from '@destyler-ui/react'

const initialItems = [
  { id: '1', label: 'Dashboard', href: '/dashboard' },
  { id: '2', label: 'Settings', href: '/settings' },
  { id: '3', label: 'Profile' },
]

export function Context() {
  const [hoveredId, _setHoveredId] = useState<string | null>(null)
  const [focusedId, _setFocusedId] = useState<string | null>(null)

  return (
    <main>
      <Breadcrumbs.Root items={initialItems}>
        <Breadcrumbs.List>
          <Breadcrumbs.Context>
            {breadcrumbs => (
              <>
                {breadcrumbs.items.map((item, index) => (
                  <Breadcrumbs.Item key={item.id} item={item}>
                    <Breadcrumbs.Link item={item}>
                      {index === 0 && <span>🏠</span>}
                      {item.label}
                    </Breadcrumbs.Link>
                    {item.href && (
                      <Breadcrumbs.Separator>
                        <svg
                          width="16"
                          height="16"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                        >
                          <polyline points="9 18 15 12 9 6" />
                        </svg>
                      </Breadcrumbs.Separator>
                    )}
                  </Breadcrumbs.Item>
                ))}
                <p>Hovered: {hoveredId || 'none'}</p>
                <p>Focused: {focusedId || 'none'}</p>
              </>
            )}
          </Breadcrumbs.Context>
        </Breadcrumbs.List>
      </Breadcrumbs.Root>
    </main>
  )
}

import { Breadcrumbs } from '@destyler-ui/solid/breadcrumbs'
import { For, Show } from 'solid-js'

const initialItems = [
  { id: '1', label: 'Dashboard', href: '/dashboard' },
  { id: '2', label: 'Settings', href: '/settings' },
  { id: '3', label: 'Profile' },
]

export function Context() {
  return (
    <main>
      <Breadcrumbs.Root items={initialItems}>
        <Breadcrumbs.List>
          <Breadcrumbs.Context>
            {breadcrumbs => (
              <>
                <For each={breadcrumbs().items}>
                  {(item, index) => (
                    <Breadcrumbs.Item item={item}>
                      <Breadcrumbs.Link item={item}>
                        <Show when={index() === 0}>
                          <span>🏠</span>
                        </Show>
                        {item.label}
                      </Breadcrumbs.Link>
                      <Show when={item.href}>
                        <Breadcrumbs.Separator>
                          <svg
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                          >
                            <polyline points="9 18 15 12 9 6" />
                          </svg>
                        </Breadcrumbs.Separator>
                      </Show>
                    </Breadcrumbs.Item>
                  )}
                </For>
                <p>Hovered: {breadcrumbs().hoveredId || 'none'}</p>
                <p>Focused: {breadcrumbs().focusedId || 'none'}</p>
              </>
            )}
          </Breadcrumbs.Context>
        </Breadcrumbs.List>
      </Breadcrumbs.Root>
    </main>
  )
}

<script lang="ts">
  import { Breadcrumbs } from '@destyler-ui/svelte'

  const items = [
    { id: '1', label: 'Dashboard', href: '/dashboard' },
    { id: '2', label: 'Settings', href: '/settings' },
    { id: '3', label: 'Profile' },
  ]
</script>

<main>
  <Breadcrumbs.Root {items}>
    <Breadcrumbs.List>
      <Breadcrumbs.Context>
        {#snippet render(breadcrumbs)}
          <output>
            <p>Hovered: {breadcrumbs().hoveredId || 'none'}</p>
            <p>Focused: {breadcrumbs().focusedId || 'none'}</p>
          </output>
          {#each breadcrumbs().items as item, index (item.id)}
            <Breadcrumbs.Item {item}>
              <Breadcrumbs.Link {item}>
                {#if index === 0}<span>🏠</span>{/if}
                {item.label}
              </Breadcrumbs.Link>
              {#if item.href}
                <Breadcrumbs.Separator>
                  <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6" /></svg>
                </Breadcrumbs.Separator>
              {/if}
            </Breadcrumbs.Item>
          {/each}
        {/snippet}
      </Breadcrumbs.Context>
    </Breadcrumbs.List>
  </Breadcrumbs.Root>
</main>

Root Provider

<script setup lang="ts">
import { reactive } from 'vue'
import { Breadcrumbs, useBreadcrumbs } from '@destyler-ui/vue'

const props = reactive({
  items: [
    { id: '1', label: 'Home', href: '/' },
    { id: '2', label: 'Products', href: '/products' },
    { id: '3', label: 'Electronics' },
  ],
})

const breadcrumbs = useBreadcrumbs(props)

function addItem() {
  const newItem = { id: String(props.items.length + 1), label: `Item ${props.items.length + 1}` }
  props.items = [...props.items, newItem]
}
</script>

<template>
  <main>
    <button @click="addItem">Add Item</button>
    <Breadcrumbs.RootProvider :value="breadcrumbs">
      <Breadcrumbs.List>
        <Breadcrumbs.Context v-slot="api">
          <Breadcrumbs.Item v-for="(item, index) in api.items" :key="item.id" :item="item">
            <Breadcrumbs.Link :item="item">{{ item.label }}</Breadcrumbs.Link>
            <Breadcrumbs.Separator v-if="index < api.items.length - 1">/</Breadcrumbs.Separator>
          </Breadcrumbs.Item>
        </Breadcrumbs.Context>
      </Breadcrumbs.List>
    </Breadcrumbs.RootProvider>
  </main>
</template>

import { useState } from 'react'
import { Breadcrumbs, useBreadcrumbs } from '@destyler-ui/react'

export function RootProvider() {
  const [items, setItems] = useState([
    { id: '1', label: 'Home', href: '/' },
    { id: '2', label: 'Products', href: '/products' },
    { id: '3', label: 'Electronics' },
  ])

  const breadcrumbs = useBreadcrumbs({ items })

  const addItem = () => {
    const newId = String(items.length + 1)
    const newItem = {
      id: newId,
      label: `Item ${newId}`,
    }
    setItems([...items, newItem])
  }

  return (
    <main>
      <button onClick={addItem}>Add Item</button>
      <Breadcrumbs.RootProvider value={breadcrumbs}>
        <Breadcrumbs.List>
          <Breadcrumbs.Context>
            {api =>
              api.items.map(item => (
                <Breadcrumbs.Item key={item.id} item={item}>
                  <Breadcrumbs.Link item={item}>{item.label}</Breadcrumbs.Link>
                  {item.href && <Breadcrumbs.Separator>/</Breadcrumbs.Separator>}
                </Breadcrumbs.Item>
              ))}
          </Breadcrumbs.Context>
        </Breadcrumbs.List>
      </Breadcrumbs.RootProvider>
    </main>
  )
}

import { Breadcrumbs, useBreadcrumbs } from '@destyler-ui/solid/breadcrumbs'
import { createSignal, For, Show } from 'solid-js'

export function RootProvider() {
  const [items, setItems] = createSignal([
    { id: '1', label: 'Home', href: '/' },
    { id: '2', label: 'Products', href: '/products' },
    { id: '3', label: 'Electronics' },
  ])
  const breadcrumbs = useBreadcrumbs({
    get items() {
      return items()
    },
  })

  const addItem = () => {
    const id = String(items().length + 1)
    setItems(current => [...current, { id, label: `Item ${id}` }])
  }

  return (
    <main>
      <button type="button" onClick={addItem}>
        Add Item
      </button>
      <Breadcrumbs.RootProvider value={breadcrumbs}>
        <Breadcrumbs.List>
          <Breadcrumbs.Context>
            {api => (
              <For each={api().items}>
                {item => (
                  <Breadcrumbs.Item item={item}>
                    <Breadcrumbs.Link item={item}>{item.label}</Breadcrumbs.Link>
                    <Show when={item.href}>
                      <Breadcrumbs.Separator>/</Breadcrumbs.Separator>
                    </Show>
                  </Breadcrumbs.Item>
                )}
              </For>
            )}
          </Breadcrumbs.Context>
        </Breadcrumbs.List>
      </Breadcrumbs.RootProvider>
    </main>
  )
}

<script lang="ts">
  import { Breadcrumbs, useBreadcrumbs } from '@destyler-ui/svelte'

  let items = $state([
    { id: '1', label: 'Home', href: '/' },
    { id: '2', label: 'Products', href: '/products' },
    { id: '3', label: 'Electronics' },
  ])
  const id = $props.id()
  const breadcrumbs = useBreadcrumbs(() => ({ id, items }))
  function addItem() {
    items = [...items, { id: String(items.length + 1), label: `Item ${items.length + 1}` }]
  }
</script>

<main>
  <button type="button" onclick={addItem}>Add Item</button>
  <Breadcrumbs.RootProvider value={breadcrumbs}>
    <Breadcrumbs.List>
      <Breadcrumbs.Context>
        {#snippet render(api)}
          {#each api().items as item (item.id)}
            <Breadcrumbs.Item {item}>
              <Breadcrumbs.Link {item}>{item.label}</Breadcrumbs.Link>
              {#if item.href}<Breadcrumbs.Separator>/</Breadcrumbs.Separator>{/if}
            </Breadcrumbs.Item>
          {/each}
        {/snippet}
      </Breadcrumbs.Context>
    </Breadcrumbs.List>
  </Breadcrumbs.RootProvider>
</main>

API Reference

Root

Prop	Default	Type
`items*`	—	`BreadcrumbItem[]` The breadcrumb items to display.
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`id`	—	`string` The unique identifier of the machine.

Context

No serializable props or emits are declared for this part.

Item

Prop	Default	Type
`item*`	—	`BreadcrumbItem`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Link

Prop	Default	Type
`item*`	—	`BreadcrumbItem`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

List

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Separator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; list: string; separator: string; }>` DOM 元素的 ID
`items`	—	`breadcrumbs.BreadcrumbItem[]` 面包屑项目

Context

Prop	Default	Type
`children*`	—	`(context: UseBreadcrumbsReturn) => ReactNode`

Item

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Link

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

List

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseBreadcrumbsReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Separator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js404.JSX.HTMLAttributes<HTMLElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`ids`	—	`Partial<{ root: string; list: string; separator: string; }>` DOM 元素的 ID
`items`	—	`breadcrumbs.BreadcrumbItem[]` 面包屑项目

Context

Prop	Default	Type
`children*`	—	`(context: UseBreadcrumbsContext) => Element`

Item

Prop	Default	Type
`item*`	—	`BreadcrumbItem`
`asChild`	—	`(props: (userProps?: solid_js404.JSX.LiHTMLAttributes<HTMLLIElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Link

Prop	Default	Type
`item*`	—	`BreadcrumbItem`
`asChild`	—	`(props: (userProps?: solid_js404.JSX.AnchorHTMLAttributes<HTMLAnchorElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

List

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js404.JSX.OlHTMLAttributes<HTMLOListElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseBreadcrumbsReturn`
`asChild`	—	`(props: (userProps?: solid_js404.JSX.HTMLAttributes<HTMLElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Separator

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js404.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"nav">]>`
`children`	—	`Snippet<[]> \| undefined`
`id`	—	`string`
`ids`	—	`Partial<{ root: string; list: string; separator: string; }>` DOM 元素的 ID
`items`	—	`import("/home/runner/work/ui/ui/packages/svelte/dist/index").BreadcrumbItem[]` 面包屑项目

Context

Prop	Default	Type
`render`	—	`Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/index").UseBreadcrumbsReturn]>`

Item

Prop	Default	Type
`item*`	—	`BreadcrumbItem`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"li">]>`
`children`	—	`Snippet<[]> \| undefined`

Link

Prop	Default	Type
`item*`	—	`BreadcrumbItem`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"a">]>`
`children`	—	`Snippet<[]> \| undefined`

List

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"ol">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseBreadcrumbsReturn`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"nav">]>`
`children`	—	`Snippet<[]> \| undefined`

Separator

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`