BUX Component Development Platform

Breadcrumb: With Overflow Menu 

<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">

            <button class="bux-popover__trigger bux-context-menu__trigger bux-context-menu__trigger--icon-button">
                <span class="visually-hidden">more breadcrumbs</span>
                <span aria-hidden="true" class="icon icon-dots-h"></span>
            </button>
            <div class="bux-popover__container bux-context-menu__container">
                <div class="bux-popover__caret ">
                    <svg viewBox="0 0 10 10">
                        <path class="caret--chevron"></path>
                    </svg>
                </div>
                <div class="bux-context-menu__active-item-indicator" aria-hidden="true"></div>
                <ul class="bux-popover__body">
                    <li class="bux-context-menu__item">
                        <a class="item__link" href="">
                            Level 1
                        </a>
                    </li>
                    <li class="bux-context-menu__item">
                        <a class="item__link" href="">
                            Level 2
                        </a>
                    </li>
                    <li class="bux-context-menu__item">
                        <a class="item__link" href="">
                            Level 3
                        </a>
                    </li>
                    <li class="bux-context-menu__item">
                        <a class="item__link" href="">
                            Level 4
                        </a>
                    </li>
                </ul>
            </div>

        <li class="bux-breadcrumb__item">
            <a class="bux-breadcrumb__link" href="#">Level 5</a>
        </li>
        <li class="bux-breadcrumb__item bux-breadcrumb__item--current" aria-current="page">Level 6</li>
        </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">
		{% if breadcrumb|length >= 7 %}
			{% for item in breadcrumb|slice(0,1) %}
					<li class="bux-breadcrumb__item">
						{% if item.url %}
							<a class="bux-breadcrumb__link" href="{{ item.url }}">{{ item.text }}</a>
						{% else %}
							{{ item.text }}
						{% endif %}
					</li>
			{% endfor %}

			{% set context_menu_items = breadcrumb|slice(1,breadcrumb|length - 3) %}
			<li class="bux-breadcrumb__item">
			{% include '@context-menu' with {items: context_menu_items, label: 'more breadcrumbs', trigger_icon: "dots-h"} %}

			{% for item in breadcrumb|slice(breadcrumb|length - 2) %}
				{% 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 %}
			</li>
		{% else %}
			{% 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 %}
		{% endif %}
	</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
breadcrumb:
  - text: Home
    url: '#'
  - text: Level 1
    url: '#'
  - text: Level 2
    url: '#'
  - text: Level 3
    url: '#'
  - text: Level 4
    url: '#'
  - text: Level 5
    url: '#'
  - text: Level 6
    url: '#'
  • Content: 
    .bux-breadcrumb {
	display: block;
	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 .bux-popover__trigger {
	background-color: $clear;
	color: $scarlet;
	border: none;
	display: inline-block;
	place-items: center;
	vertical-align: middle;
	margin-right: 4px;
	transition-duration: .3s;
	transition-property: background-color,border-color,color,fill,stroke;
	transition-timing-function: cubic-bezier(.4,0,.2,1);
	cursor: pointer;
	&:hover {
		background-color: $gray-light-80;
	}
	&:focus-visible {
		outline: 2px solid $focus;
		outline-offset: 2px;
	}
}

.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: 1.1 KB

No notes defined.