CDLIB UI

Mobile Nav

300 × 150 
<nav class="c-mobilenav">
    <ul>
        <li>

            <a href="">Incredible Soft Computer</a>

        </li>
        <li>

            <a href="">Licensed Steel Bacon</a>

        </li>
        <li>

            <a href="">Awesome Granite Soap</a>

        </li>
        <li>

            <a href="">Licensed Wooden Table</a>

        </li>
        <li>

            <a href="">Bespoke Granite Chips</a>

        </li>
    </ul>
</nav>
 
<nav class="c-mobilenav">
  <ul>
    {{#each list}}
    <li>
      {{> @link }}
    </li>
    {{/each}}
  </ul>
</nav>
 
{
  "list": [
    {
      "link": {
        "text": "Incredible Soft Computer"
      }
    },
    {
      "link": {
        "text": "Licensed Steel Bacon"
      }
    },
    {
      "link": {
        "text": "Awesome Granite Soap"
      }
    },
    {
      "link": {
        "text": "Licensed Wooden Table"
      }
    },
    {
      "link": {
        "text": "Bespoke Granite Chips"
      }
    }
  ]
}

Styling with this component only appears between base and large screen breakpoints; there is no styling after the mobile breakpoint.