Mercedes Pattern Library

Action Button Menu: Default 

<div class="m-action-button">
    <div class="m-action-button__toggle">
        <div class="a-button-round">
            <svg class="icon icon--more">
  <use xlink:href="../../assets/icons.svg#more" />
</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">
	<div class="m-action-button__toggle">
		{% render '@button-round', { icon: 'more'} %}		
	</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.