Mercedes Pattern Library

Action Button Menu: Active 

<div class="m-action-button m-action-button--active">
    <div class="m-action-button__toggle">
        <div class="a-button-round a-button-round--active">
            <svg class="icon icon--close">
  <use xlink:href="../../assets/icons.svg#close" />
</svg>

        </div>
    </div>

    <div class="m-action-button__menu">

        <div class="m-action-button__menu-items">
            <a href="#" class="a-link">
	
	link test
</a>
        </div>

        <div class="m-action-button__menu-items">
            <a href="#" class="a-link">
	
	link test 2
</a>
        </div>

        <div class="m-action-button__menu-items">
            <a href="#" class="a-link">
	
	link test 3 
</a>
        </div>

        <div class="m-action-button__menu-items">
            <a href="#" class="a-link">
	
	link test 4
</a>
        </div>

    </div>
</div>
 
<div class="m-action-button m-action-button--active">
	<div class="m-action-button__toggle">
		{% render '@button-round--active', { icon: 'close'} %}		
	</div>

	<div class="m-action-button__menu">
		 {% if actionbuttons %}        	
			{% for item in actionbuttons %}
				<div class="m-action-button__menu-items">
					{% render '@' + item.atom, item %}
				</div>
			{% endfor %}			
    	{% endif %}
	</div>
</div>
 
{
  "actionbuttons": [
    {
      "atom": "link",
      "value": "/",
      "label": "link test"
    },
    {
      "atom": "link",
      "value": "/",
      "label": "link test 2"
    },
    {
      "atom": "link",
      "value": "/",
      "label": "link test 3 "
    },
    {
      "atom": "link",
      "value": "/",
      "label": "link test 4"
    }
  ]
}

There are no notes for this item.