Breadcrumb (breadcrumb)

Breadcrumbs provide secondary navigation to help users understand where they are in a website.

🔗 External documentation.

ID Label Description Schema
items Items
                        type: array
items:
    type: object
    properties:
        title:
            type: string
        attributes:
            $ref: '#/$defs/attributes_value'
        below:
            type: object

                      
            id: breadcrumb
label: Breadcrumb
description: 'Breadcrumbs provide secondary navigation to help users understand where they are in a website.'
group: Navigation
homepage: 'https://designsystem.digital.gov/components/breadcrumb/'
variants:
    default:
        id: default
        label: Default
    wrap:
        id: wrap
        label: Wrap
props:
    items:
        id: items
        label: Items
        schema:
            type: array
            items:
                type: object
                properties:
                    title:
                        type: string
                    attributes:
                        $ref: '#/$defs/attributes_value'
                    below:
                        type: object
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': breadcrumb
            items:
                -
                    title: 'How to use USWDS'
                    url: '#'
                -
                    title: 'Design principles'
                    url: '#'
                -
                    title: Components

          

Default ( default )

Wrap ( wrap )