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.