Framework Component Library

Breadcrumb 

<div class="
		breadcrumb
				" id="breadcrumb-9">
    <nav class="breadcrumb__nav" aria-labelledby="breadcrumb-9__nav-title">
        <div class="breadcrumb__nav-header">
            <h2 class="breadcrumb__nav-title" id="breadcrumb-9__nav-title">
                You are here:
            </h2>
        </div>
        <ol class="breadcrumb__list" aria-labelledby="breadcrumb-9__nav-title">
            <li class="breadcrumb__item breadcrumb__item--home">
                <a class="breadcrumb__pill breadcrumb__pill--link" href="#">
                    <span class="breadcrumb__pill-inner">
                        <span class="breadcrumb__pill-icon" aria-hidden="true">
                            <svg class="icon icon--home">
                                <use href="/images/icons.svg?1.0.0#home" />
                            </svg>
                        </span>
                        <span class="breadcrumb__pill-label">
                            Home
                        </span>
                    </span>
                </a>
                <span class="breadcrumb__divider" aria-hidden="true">
                    <svg class="icon icon--angle-right">
                        <use href="/images/icons.svg?1.0.0#angle-right" />
                    </svg>
                </span>
            </li>
            <li class="breadcrumb__item">
                <a class="breadcrumb__pill breadcrumb__pill--link" href="#">
                    <span class="breadcrumb__pill-inner">
                        <span class="breadcrumb__pill-label">Navigation Level</span>
                    </span>
                </a>
                <span class="breadcrumb__divider" aria-hidden="true">
                    <svg class="icon icon--angle-right">
                        <use href="/images/icons.svg?1.0.0#angle-right" />
                    </svg>
                </span>
            </li>
            <li class="breadcrumb__item">
                <a class="breadcrumb__pill breadcrumb__pill--link" href="#">
                    <span class="breadcrumb__pill-inner">
                        <span class="breadcrumb__pill-label">Parent Level</span>
                    </span>
                </a>
                <span class="breadcrumb__divider" aria-hidden="true">
                    <svg class="icon icon--angle-right">
                        <use href="/images/icons.svg?1.0.0#angle-right" />
                    </svg>
                </span>
            </li>
            <li class="breadcrumb__item" aria-current="page">
                <span class="breadcrumb__pill">
                    <span class="breadcrumb__pill-inner">
                        <span class="breadcrumb__pill-label"></span>
                    </span>
                </span>
                <span class="breadcrumb__end" aria-hidden="true">
                    <svg class="icon icon--angle-down">
                        <use href="/images/icons.svg?1.0.0#angle-down" />
                    </svg>
                </span>
            </li>
        </ol>
    </nav>
</div>
 
{#
	{% include '@navigation-breadcrumb' with {
		classes: {
			modifiers: ['modifier'],
			utility: ''
		},
		links: [{ title: 'Page Title', url: '#' }],
		icon_divider: 'icon-divider',
		icon_end: 'icon-end',
		icon_home: 'icon-home'
	} %}
#}

{% set id = uniqid(class ~ 'breadcrumb') %}

<div
	class="
		breadcrumb
		{% for modifier in classes.modifiers %}
			{{ 'breadcrumb--' ~ modifier }}
		{% endfor %}
		{{ classes.utility -}}
	"
	id="{{ id }}"
>
	<nav
		class="breadcrumb__nav"
		aria-labelledby="{{ id ~ '__nav-title' }}"
	>
		<div class="breadcrumb__nav-header">
			<h2 class="breadcrumb__nav-title" id="{{ id ~ '__nav-title' }}">
				You are here:
			</h2>
		</div>
		<ol class="breadcrumb__list" aria-labelledby="{{ id ~ '__nav-title' }}">
			<li class="breadcrumb__item breadcrumb__item--home">
				<a class="breadcrumb__pill breadcrumb__pill--link" href="#">
					<span class="breadcrumb__pill-inner">
						{% if icon_home %}
							<span class="breadcrumb__pill-icon" aria-hidden="true">
								{{ icon(icon_home) }}
							</span>
						{% endif %}
						<span class="breadcrumb__pill-label">
							Home
						</span>
					</span>
				</a>
				{% if icon_divider %}
					<span class="breadcrumb__divider" aria-hidden="true">
						{{ icon(icon_divider) }}
					</span>
				{% endif %}
			</li>
			{% for link in links %}
				<li class="breadcrumb__item">
					<a class="breadcrumb__pill breadcrumb__pill--link" href="{{ link.url ?: '#' }}">
						<span class="breadcrumb__pill-inner">
							<span class="breadcrumb__pill-label">
								{{- link.title ?: link -}}
							</span>
						</span>
					</a>
					{% if icon_divider %}
						<span class="breadcrumb__divider" aria-hidden="true">
							{{ icon(icon_divider) }}
						</span>
					{% endif %}
				</li>
			{% endfor %}
			<li class="breadcrumb__item" aria-current="page">
				<span class="breadcrumb__pill">
					<span class="breadcrumb__pill-inner">
						<span class="breadcrumb__pill-label">
							{{- page.title_short ?: page.title -}}
						</span>
					</span>
				</span>
				{% if icon_end %}
					<span class="breadcrumb__end" aria-hidden="true">
						{{ icon(icon_end) }}
					</span>
				{% endif %}
			</li>
		</ol>
	</nav>
</div>

No notes defined.