Clever Component Library

Link Dropdown 

<div class="link-dropdown js-link-dropdown" data-selected-index="0">
    <h4 class="heading heading--label link-dropdown-label">Choose car brand</h4>
    <ul class="link-dropdown-list">
        <li class="link-dropdown-list-item">
            <a href="#">All</a>
        </li>
        <li class="link-dropdown-list-item">
            <a href="#">Audi</a>
        </li>
        <li class="link-dropdown-list-item">
            <a href="#">Hyundai</a>
        </li>
        <li class="link-dropdown-list-item">
            <a href="#">Jaguar</a>
        </li>
        <li class="link-dropdown-list-item">
            <a href="#">Kia</a>
        </li>
        <li class="link-dropdown-list-item">
            <a href="#">Land Rover</a>
        </li>
        <li class="link-dropdown-list-item">
            <a href="#">Mercedes</a>
        </li>
        <li class="link-dropdown-list-item">
            <a href="#">Mini</a>
        </li>
        <li class="link-dropdown-list-item">
            <a href="#">Mitsubishi</a>
        </li>
        <li class="link-dropdown-list-item">
            <a href="#">Nissan</a>
        </li>
        <li class="link-dropdown-list-item">
            <a href="#">Peugeot</a>
        </li>
        <li class="link-dropdown-list-item">
            <a href="#">Renault</a>
        </li>
    </ul>
</div>
 
<div class="link-dropdown js-link-dropdown" data-selected-index="{{ selectedIndex }}">
	<h4 class="heading heading--label link-dropdown-label">{{ label }}</h4>
	<ul class="link-dropdown-list">
		{% for link in links %}
			<li class="link-dropdown-list-item">
				<a href="{{ link.href }}">{{ link.text }}</a>
			</li>
		{% endfor %}
	</ul>
</div>
 
{
  "label": "Choose car brand",
  "selectedIndex": "0",
  "links": [
    {
      "href": "#",
      "text": "All"
    },
    {
      "href": "#",
      "text": "Audi"
    },
    {
      "href": "#",
      "text": "Hyundai"
    },
    {
      "href": "#",
      "text": "Jaguar"
    },
    {
      "href": "#",
      "text": "Kia"
    },
    {
      "href": "#",
      "text": "Land Rover"
    },
    {
      "href": "#",
      "text": "Mercedes"
    },
    {
      "href": "#",
      "text": "Mini"
    },
    {
      "href": "#",
      "text": "Mitsubishi"
    },
    {
      "href": "#",
      "text": "Nissan"
    },
    {
      "href": "#",
      "text": "Peugeot"
    },
    {
      "href": "#",
      "text": "Renault"
    }
  ]
}

No notes defined.