Add breadcrumbs to the styleguide

This commit is contained in:
Michael Lange
2018-01-16 17:04:59 -08:00
parent c8fcb4c710
commit 249fe6fd94
2 changed files with 37 additions and 0 deletions

View File

@@ -0,0 +1,33 @@
{{#freestyle-usage 'breadcrumbs-standard' title='Standard Breadcrumbs'}}
<div class="navbar is-secondary">
<div class="navbar-item"></div>
<nav class="breadcrumb is-large">
<li>
<a href="#">Topic</a>
</li>
<li>
<a href="#">Sub-topic</a>
</li>
<li class="is-active">
<a href="#">Active Topic</a>
</li>
</nav>
</div>
{{/freestyle-usage}}
{{#freestyle-annotation}}
Breadcrumbs are only ever used in the secondary nav of the primary header.
{{/freestyle-annotation}}
{{#freestyle-usage 'breadcrumbs-single' title='Single Breadcrumb'}}
<div class="navbar is-secondary">
<div class="navbar-item"></div>
<nav class="breadcrumb is-large">
<li>
<a href="#">Topic</a>
</li>
</nav>
</div>
{{/freestyle-usage}}
{{#freestyle-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.
{{/freestyle-annotation}}

View File

@@ -18,11 +18,15 @@
{{#section.subsection name="Boxed section"}}
{{freestyle/sg-boxed-section}}
{{/section.subsection}}
{{#section.subsection name="Breadcrumbs"}}
{{freestyle/sg-breadcrumbs}}
{{/section.subsection}}
{{#section.subsection name="Buttons"}}
{{freestyle/sg-buttons}}
{{/section.subsection}}
{{#section.subsection name="Diff Viewer"}}
{{/section.subsection}}
{{#section.subsection name="Dropdown"}}