CDLIB UI

Mobile Nav 

<nav class="c-mobilenav">
    <ul>
        <li>

            <a href="">Recycled Bronze Bacon</a>

        </li>
        <li>

            <a href="">Awesome Cotton Computer</a>

        </li>
        <li>

            <a href="">Ergonomic Cotton Keyboard</a>

        </li>
        <li>

            <a href="">Recycled Metal Keyboard</a>

        </li>
        <li>

            <a href="">Rustic Wooden Mouse</a>

        </li>
    </ul>
</nav>
 
<nav class="c-mobilenav">
  <ul>
    {{#each list}}
    <li>
      {{> @link }}
    </li>
    {{/each}}
  </ul>
</nav>
 
{
  "list": [
    {
      "link": {
        "text": "Recycled Bronze Bacon"
      }
    },
    {
      "link": {
        "text": "Awesome Cotton Computer"
      }
    },
    {
      "link": {
        "text": "Ergonomic Cotton Keyboard"
      }
    },
    {
      "link": {
        "text": "Recycled Metal Keyboard"
      }
    },
    {
      "link": {
        "text": "Rustic Wooden Mouse"
      }
    }
  ]
}

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