BUX Component Development Platform

Breadcrumb 

<nav aria-label="Breadcrumb" class="bux-breadcrumb">
    <ol class="bux-breadcrumb__list">
        <li class="bux-breadcrumb__item">
            <a class="bux-breadcrumb__link" href="#">Home</a>
        </li>
        <li class="bux-breadcrumb__item">
            <a class="bux-breadcrumb__link" href="#">Level 1</a>
        </li>
        <li class="bux-breadcrumb__item">
            <a class="bux-breadcrumb__link" href="#">Level 2</a>
        </li>
        <li class="bux-breadcrumb__item bux-breadcrumb__item--current" aria-current="page">Level 3</li>
    </ol>
</nav>
 
{# 

Breadcrumb

Available variables:

- breadcrumb:   Array containing the breacrumb link list.
- item.url:     URL for a breadcrumb link item.
- item.text:    Label for a breadcrumb link item.

#}

<nav aria-label="Breadcrumb" class="bux-breadcrumb">
	<ol class="bux-breadcrumb__list">
		{% for item in breadcrumb %}
			{% if loop.last %}
				<li class="bux-breadcrumb__item bux-breadcrumb__item--current" aria-current="page">{{ item.text }}</li>
			{% else %}
				<li class="bux-breadcrumb__item">
					{% if item.url %}
						<a class="bux-breadcrumb__link" href="{{ item.url }}">{{ item.text }}</a>
					{% else %}
						{{ item.text }}
					{% endif %}
				</li>
			{% endif %}
		{% endfor %}
	</ol>
</nav>
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
  • Content: 
    .bux-breadcrumb {
	display: block;
	margin: $sp-16 0;
	line-height: $sp-24;
}

.bux-breadcrumb__item {
	position: relative;
	display: inline-block;
	color: $gray-dark-40;
	font-weight: 400;
	font-size: $ts-sm;

	&::after {
		font-size: 10px;
		content: "\f005";
		font-family: $icon;
		margin-right: $sp-4;
	}
}

.bux-breadcrumb__item--current::after {
	content: "";
}

.bux-breadcrumb__link {
	@include link-base(none, no);
	color: $scarlet;
	margin-right: $sp-4;
}

// Background variant.
.bux-breadcrumb--alt {
	background: $gray-light-20;
	border-radius: 4px;
	padding: $sp-8;
	.bux-breadcrumb__link {
		@include link-base(light, no);
	}
}
  • URL: /components/raw/breadcrumb/_breadcrumb.scss
  • Filesystem Path: src/components/breadcrumb/_breadcrumb.scss
  • Size: 644 Bytes

No notes defined.