Breadcrumb

Display a trail of links separated by symbols

Use the Breadcrumb component to show hierarchical path from the homepage to the current page. They’re not only useful for navigation, but can also improve SEO by helping search engines better understand the structure of your site. Breadcrumbs are especially useful in complex websites or apps with multiple layers of content, such as e-commerce sites or online documentation platforms.

---
import { Breadcrumb } from 'webcoreui/astro'

const breadcrumbs = [
    { label: 'Home', href: '/' },
    { label: 'Docs', href: '/docs' },
    { label: 'Components', href: '/docs/components' }
]
---

<Breadcrumb items={breadcrumbs} />

<script>
    import { Breadcrumb } from 'webcoreui/svelte'

    const breadcrumbs = [
        { label: 'Home', href: '/' },
        { label: 'Docs', href: '/docs' },
        { label: 'Components', href: '/docs/components' }
    ]
</script>

<Breadcrumb items={breadcrumbs} />

import React from 'react'
import { Breadcrumb } from 'webcoreui/react'

const breadcrumbs = [
    { label: 'Home', href: '/' },
    { label: 'Docs', href: '/docs' },
    { label: 'Components', href: '/docs/components' }
]

const Component = () => (
    <Breadcrumb items={breadcrumbs} />
)

export default Component

To use the Breadcrumb component, you must pass an items prop to the component that references the breadcrumb items as an array of objects, where each object describes a breadcrumb link. Each object can have the following properties:

• icon: Sets an icon for the anchor.
• label: Sets a label for the anchor.
• href: Sets a link for the anchor.
• target: Sets the target of the anchor.

Breadcrumbs with Icons

<Breadcrumb items={[
    { icon: '<svg ... />', label: 'Home', href: '/' },
    { icon: '<svg ... />', label: 'Docs', href: '/docs' },
    { icon: '<svg ... />', label: 'Components', href: '/docs/components' }
]} />

<Breadcrumb items={[
    { icon: 'home', href: '/' },
    { icon: 'file', href: '/docs' },
    { icon: 'components', href: '/docs/components' }
]} />

The icon can be an imported SVG string. You can import icons from webcoreui/icons. For Astro components, you can also reference the icon type. For available icons in Webcore, see the documentation of the Icon component. Icons and labels are optional, meaning you can also create breadcrumbs with icons only.

Custom Separators

To use a custom separator, pass a string to the separator prop on the Breadcrumb component:

<Breadcrumb items={[ ... ]} separator="/" />
<Breadcrumb items={[ ... ]} separator="|" />

API

type BreadcrumbProps = {
    items: {
        icon?: string
        label?: string
        href?: string
        target?: '_self'
            | '_blank'
            | '_parent'
            | '_top'
            | '_unfencedTop'
    }[]
    separator?: string
    className?: string
}