github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/stories/components/breadcrumbs.stories.js (about) 1 import hbs from 'htmlbars-inline-precompile'; 2 3 export default { 4 title: 'Components|Breadcrumbs', 5 }; 6 7 export let Standard = () => { 8 return { 9 template: hbs` 10 <h5 class="title is-5">Breadcrumbs</h5> 11 <div class="navbar is-secondary"> 12 <div class="navbar-item"></div> 13 <nav class="breadcrumb is-large"> 14 <li> 15 <a href="javascript:;">Topic</a> 16 </li> 17 <li> 18 <a href="javascript:;">Sub-topic</a> 19 </li> 20 <li class="is-active"> 21 <a href="javascript:;">Active Topic</a> 22 </li> 23 </nav> 24 </div> 25 <p class="annotation">Breadcrumbs are only ever used in the secondary nav of the primary header.</p> 26 `, 27 }; 28 }; 29 30 export let Single = () => { 31 return { 32 template: hbs` 33 <h5 class="title is-5">Single breadcrumb</h5> 34 <div class="navbar is-secondary"> 35 <div class="navbar-item"></div> 36 <nav class="breadcrumb is-large"> 37 <li> 38 <a href="javascript:;">Topic</a> 39 </li> 40 </nav> 41 </div> 42 <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> 43 `, 44 }; 45 };