Vebego Component Library

Identifier 

<div class='mol-identifier selector'>
    <div class='selector-label selector-wrapper'>
        <span class='text'>Groen</span>
        <button> <i class="atm-icon  far fa-chevron-down  fa-xs "></i>
        </button>
    </div>
    <div class='selector-sub'>
        <ul>
            <li class="selector-item selector-item--facility-solutions">
                <span>/</span>
                <a class="atm-nav-link " href="#" title="" aria-label="" target="">Facility solutions</a>

            </li>
            <li class="selector-item selector-item--cleaning-services">
                <span>/</span>
                <a class="atm-nav-link " href="#" title="" aria-label="" target="">Cleaning services</a>

            </li>
            <li class="selector-item selector-item--zorg">
                <span>/</span>
                <a class="atm-nav-link " href="#" title="" aria-label="" target="">Zorg</a>

            </li>
            <li class="selector-item selector-item--landscaping-services">
                <span>/</span>
                <a class="atm-nav-link " href="#" title="" aria-label="" target="">Landscaping services</a>

            </li>
        </ul>
    </div>
</div>
 
<div class='mol-identifier selector'>
        <div class='selector-label selector-wrapper'>
            <span class='text'>{{current.text}}</span>
            <button>{{render '@icon' @root.dropDownIcon}}</button>
        </div>
        <div class='selector-sub'>
            <ul>
                {{#each other}}
                    <li class="selector-item selector-item--{{this.class}}">
                        <span>/</span>        
                        {{render '@nav-link' this}}
                    </li>
                {{/each}}
            </ul>
        </div>
    </div>
 
{
  "modifier": "default",
  "checkboxId": "lang-select-checkbox",
  "dropDownIcon": {
    "icon": "fa-chevron-down",
    "style": "far",
    "size": "fa-xs"
  },
  "arrowIcon": {
    "icon": "fa-arrow-right",
    "style": "far"
  },
  "current": {
    "text": "Groen"
  },
  "other": [
    {
      "text": "Facility solutions",
      "class": "facility-solutions",
      "href": "#"
    },
    {
      "text": "Cleaning services",
      "class": "cleaning-services",
      "href": "#"
    },
    {
      "text": "Zorg",
      "class": "zorg",
      "href": "#"
    },
    {
      "text": "Landscaping services",
      "class": "landscaping-services",
      "href": "#"
    }
  ]
}

No notes defined.