46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
import hbs from 'htmlbars-inline-precompile';
|
|
|
|
export default {
|
|
title: 'Components|Breadcrumbs',
|
|
};
|
|
|
|
export let Standard = () => {
|
|
return {
|
|
template: hbs`
|
|
<h5 class="title is-5">Breadcrumbs</h5>
|
|
<div class="navbar is-secondary">
|
|
<div class="navbar-item"></div>
|
|
<nav class="breadcrumb is-large">
|
|
<li>
|
|
<a href="javascript:;">Topic</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;">Sub-topic</a>
|
|
</li>
|
|
<li class="is-active">
|
|
<a href="javascript:;">Active Topic</a>
|
|
</li>
|
|
</nav>
|
|
</div>
|
|
<p class="annotation">Breadcrumbs are only ever used in the secondary nav of the primary header.</p>
|
|
`,
|
|
};
|
|
};
|
|
|
|
export let Single = () => {
|
|
return {
|
|
template: hbs`
|
|
<h5 class="title is-5">Single breadcrumb</h5>
|
|
<div class="navbar is-secondary">
|
|
<div class="navbar-item"></div>
|
|
<nav class="breadcrumb is-large">
|
|
<li>
|
|
<a href="javascript:;">Topic</a>
|
|
</li>
|
|
</nav>
|
|
</div>
|
|
<p class="annotation">Breadcrumbs are given a lot of emphasis and often double as a page title. Since they are also global state, they are important for helping a user keep their bearings.</p>
|
|
`,
|
|
};
|
|
};
|