Styleguide

Breadcrumbs 

<div class="a-breadcrumbs">
    <div>
        <span>
            <a href="http://localhost/">Front Page</a>
            <span><a class="breadcrumb_second_last" href="http://localhost/lirum-larum-test-ich-mal/">Lirum larum test ich mal</a>
                <span class="breadcrumb_last">Another page with a very long title that must be cut for breadcrumbs</span>
            </span>
        </span>
    </div>
</div>
 
<div class="a-breadcrumbs">
	<div>
		<span>
			<a href="http://localhost/">Front Page</a>
			<span><a class="breadcrumb_second_last" href="http://localhost/lirum-larum-test-ich-mal/">Lirum larum test ich mal</a>
				<span class="breadcrumb_last">Another page with a very long title that must be cut for breadcrumbs</span>
			</span>
		</span>
	</div>
</div>
  • Content: 
    .a-breadcrumbs {
	$arrow: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' version='1'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%2384B414'%3E%3Cpath d='M6 0l3 3-3 3M9 3H0'/%3E%3C/g%3E%3C/svg%3E";

	font-size: .875rem;

	a {
		@include clean-link;
		transition: color $transition-fast $transition-ease;
		display: none;

		@include hover() {
			color: $color-primary;

			@include high-contrast {
				color: $color-primary-dark;
			}
		}
	}

	& a,
	.breadcrumb_last {
		max-width: 180px;
		overflow-y: visible;
		overflow-x: clip;
		text-overflow: ellipsis;
		white-space: nowrap;

		&::before,
		&:hover::before,
		&:focus::before {
			content: ' ';
			display: inline-block;
			background: url($arrow) no-repeat center center;
			background-size: contain;
			width: 0.8em;
			margin: 0.2em 0.5em 0 0.2em;
			height: 0.8em !important; // make sure to overwrite the hover height defined in the typography
		}

		@include media($_DESKTOP) {
			display: inline-block;
		}
	}

	.breadcrumb_second_last {
		display: inline-block;

		@include media($_MOBILE) {
			&::before,
			&:hover::before,
			&:focus::before {
				transform: rotate(180deg);
				margin: 0 0.5em -0.1em 0.2em;
			}
		}
	}

	.breadcrumb_last {
		@include media($_MOBILE) {
			display: none;
		}
	}

	// home
	& > div > span:first-of-type > a {
		font-weight: $font-weight-semi;

		@include media($_DESKTOP) {
			&::before,
			&:hover::before,
			&:focus::before {
				display: none;
			}
		}
	}
}
  • URL: /components/raw/a-breadcrumbs/_a-breadcrumbs.scss
  • Filesystem Path: styleguide/src/components/atoms/a-breadcrumbs/_a-breadcrumbs.scss
  • Size: 1.5 KB
  • Content: 
    import BaseView from 'base-view';

const FIRST_LINK_SELECTOR = 'div > span:nth-of-type(2) > a';
const MENU_SELECTOR = '.o-header__display';
const ITEM_SELECTOR = '.m-menu__nav-link--';
const HAMBURGER_SELECTOR = '.a-hamburger';

const PARENT_CLASS = 'm-menu__nav-link--parent';

const HASH_PREFIX = '#menu-item-';

export default class ABreadcrumbs extends BaseView {
	initialize() {
		this.menu = document.querySelector(MENU_SELECTOR);
	}

	bind() {
		super.bind();

		this.on('click', FIRST_LINK_SELECTOR, (event) => this.handleClick(event));
	}

	handleClick(event) {
		const hash = event.delegateTarget.hash;
		const id = hash.replace(HASH_PREFIX, '');

		const item = this.menu.querySelector(ITEM_SELECTOR + id);

		if (item && item.classList.contains(PARENT_CLASS)) {
			this.openNav(item);
			event.preventDefault();
		}
	}

	openNav(item) {
		if (!this.isDesktop()) {
			this.menu.querySelector(HAMBURGER_SELECTOR).click();
		}

		item.click();
	}
}
  • URL: /components/raw/a-breadcrumbs/a-breadcrumbs.js
  • Filesystem Path: styleguide/src/components/atoms/a-breadcrumbs/a-breadcrumbs.js
  • Size: 958 Bytes 
/* No context defined. */

No notes defined.