github.com/thomasobenaus/nomad@v0.11.1/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  };