Breadcrumb
OrganismHierarchical navigation trail wrapped in nav aria-label="Breadcrumb". Last item marked with aria-current="page" and aria-hidden separators.
<%- include('modules/ui/Breadcrumb', {
items: [
{ label: 'Home', href: '/' },
{ label: 'Products', href: '/products' },
{ label: 'Laptop Pro 15' }
]
}) %>
<%- include('modules/ui/Breadcrumb', {
items: [
{ label: 'Home', href: '/' },
{ label: 'Settings' }
]
}) %>
<%- include('modules/ui/Breadcrumb', {
items: [
{ label: 'Home', href: '/' },
{ label: 'Docs', href: '/docs' },
{ label: 'Components', href: '/docs/components' },
{ label: 'UI', href: '/docs/components/ui' },
{ label: 'Button' }
]
}) %>
<%
var _items = locals.items || [];
var _maxItems = locals.maxItems || 0;
var _className = locals.className || '';
var displayed = _items;
var truncated = false;
if (_maxItems && _items.length > _maxItems) {
truncated = true;
// first + ellipsis + last (_maxItems - 1) items
var tail = _items.slice(_items.length - (_maxItems - 1));
displayed = [_items[0], { label: '…', href: undefined, _isEllipsis: true }].concat(tail);
}
%>