CDLIB UI

Mobile Nav 

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

            <a href="">Modern Plastic Keyboard</a>

        </li>
        <li>

            <a href="">Practical Bronze Bike</a>

        </li>
        <li>

            <a href="">Handcrafted Steel Soap</a>

        </li>
        <li>

            <a href="">Incredible Fresh Bike</a>

        </li>
        <li>

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

        </li>
    </ul>
</nav>
 
<nav class="c-mobilenav">
  <ul>
    {{#each list}}
    <li>
      {{> @link }}
    </li>
    {{/each}}
  </ul>
</nav>
 
{
  "list": [
    {
      "link": {
        "text": "Modern Plastic Keyboard"
      }
    },
    {
      "link": {
        "text": "Practical Bronze Bike"
      }
    },
    {
      "link": {
        "text": "Handcrafted Steel Soap"
      }
    },
    {
      "link": {
        "text": "Incredible Fresh Bike"
      }
    },
    {
      "link": {
        "text": "Unbranded Granite Soap"
      }
    }
  ]
}

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