Canvas Design System
Main Site Tokens

Breadcrumb

Navigation trails showing the user's current location in the site hierarchy. Renders a semantic <nav> with aria-label and aria-current for accessibility.

Default

<?= ws_breadcrumb([
    ['label' => 'Home', 'href' => '/'],
    ['label' => 'Workshops', 'href' => '/library/workshops/'],
    ['label' => 'Design Sprint'],
]) ?>

Two Levels

Deep Nesting

Accessibility

accessibility_new The component renders a <nav aria-label="Breadcrumb"> with an <ol> list. The last item receives aria-current="page" and is rendered as plain text (not a link).

API Reference

ParamTypeDefaultDescription
$itemsarrayrequiredArray of {label, href?} objects
separatorstring'chevron_right'Separator icon name
idstringnullElement ID
classstring''Additional CSS classes