vui-breadcrumbs

This component contains SASS mixins and CSS that you can use to style breadcrumbs.

Installation

Install from NPM:

npm install vui-breadcrumbs

Install from Bower:

bower install vui-breadcrumbs

Depending on which installation method you choose, use that path when doing the SASS import:

@import 'bower_components/vui-breadcrumbs/breadcrumbs.scss';
// or...
@import "node_modules/vui-breadcrumbs/breadcrumbs.scss";

Usage

Use a <ol> HTML element to represent breadcrumbs. Each breadcrumb should be a <li> child element of the <ol>.

HTML:

<ol>
	<li>Root</li>
	<li>Node</li>
	<li>Leaf</li>
</ol>

SCSS:

ol {
	@include vui-breadcrumbs;
}

Any of the breadcrumbs in a group that uses a <a> tag will be styled as a link.

HTML:

<ul>
	<li><a href="#">Root</a></li>
	<li><a href="#">Node</a></li>
	<li>Leaf</li>
</ul>

SCSS:

ul {
	@include vui-breadcrumbs;
}

For further information on this component and other VUI components, see the docs at ui.valence.d2l.com.

Coding styles

See the VUI Best Practices & Style Guide for information on VUI naming conventions, plus information about the EditorConfig rules used in this repo.