Breadcrumb

A secondary navigation trail showing the user's location within a site hierarchy. Follows USWDS breadcrumb patterns.

Props

`c-breadcrumb`

Prop	Default	Description
`wrapped`	`"false"`	Set to `"true"` to allow breadcrumb items to wrap to multiple lines on small screens

`c-breadcrumb.breadcrumb-item`

Prop	Default	Description
`href`		URL the breadcrumb item links to; leave empty for unlinked items
`list_item`		Display text for the breadcrumb item
`aria_current`		Set to `"page"` on the current page item to mark it for screen readers

Example Usage

Default Breadcrumb

<c-breadcrumb>
    <c-breadcrumb.breadcrumb-item href="/" list_item="Home" />
    <c-breadcrumb.breadcrumb-item href="/section/" list_item="Section" />
    <c-breadcrumb.breadcrumb-item href="" list_item="Current Page" aria_current="page" />
</c-breadcrumb>

Breadcrumb with Wrapping

Use wrapped="true" to allow the trail to wrap onto multiple lines on narrow viewports.

<c-breadcrumb wrapped="true">
    <c-breadcrumb.breadcrumb-item href="/" list_item="Home" />
    <c-breadcrumb.breadcrumb-item href="/section/" list_item="Section" />
    <c-breadcrumb.breadcrumb-item href="" list_item="Current Page" aria_current="page" />
</c-breadcrumb>

Usage Notes

Mark the final (current page) item with aria_current="page" for accessibility
The current page item does not need a meaningful href since it represents the user's current location
By default, long breadcrumb trails are truncated with CSS on smaller screens; use wrapped="true" to show all items

{% load cotton %}

<div class="component-variants">
    <h1>Breadcrumb Component</h1>
    
    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>

        {% cotton breadcrumb wrapped="{{ variant.wrapped }}" %}
            {% for item in variant.items %}
                {% cotton breadcrumb.breadcrumb-item href="{{ item.href }}" list_item="{{ item.list_item }}" aria_current="{{ item.aria_current }}" %}{% endcotton %}
            {% endfor %}
        {% endcotton %}
    </div>
    {% endfor %}
</div>

name: Breadcrumb
context:
  variants:            
    - title: "Breadcrumb (default)"
      items:
        - href: ""
          list_item: "Home"
        - href: ""
          list_item: "Federal Contracting"
        - href: ""
          list_item: "Economically disadvantaged women-owned small business federal contracting program"
          aria_current: "page"
    - title: "Breadcrumb (wrapped)"
      wrapped: "true"
      items:
        - href: ""
          list_item: "Home"
        - href: ""
          list_item: "Federal Contracting"
        - href: ""
          list_item: "Economically disadvantaged women-owned small business federal contracting program"
          aria_current: "page"