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#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#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#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#angle_right" />
                    </svg>
                </span>
            </li>
            <li class="breadcrumb_item">
                <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#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">
				<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.