How to markup a dropdown menu in button group about design-system

[stomita]

I could create the desired UI by following markup, but it looks creepy...

  <div class="slds-button-group" role="group">
    <button class="slds-button slds-button--neutral">Save</button>
    <div class="slds-dropdown-trigger">
      <div class="slds-button-group">
        <button class="slds-button" style="display: none"></button>
        <button class="slds-button slds-button--icon-border-filled">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">More Actions</span>
        </button>
      </div>
      <div class="slds-dropdown slds-dropdown--left slds-text-heading--label slds-dropdown--menu">
        <ul class="slds-dropdown__list" role="menu">
          <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem">Save as</a></li>
          <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem">Delete</a></li>
        </ul>
      </div>
    </div>
  </div>

[stefsullrew]

Hi @stomita, you'll need to add the class .slds-button--last to your .slds-dropdown-trigger div element. It's mentioned in the component chart on the button-groups page: http://www.lightningdesignsystem.com/components/button-groups (And if you go to the page header component, you can see an example of it on the Record Home variant.)

Cheers!

[stomita]

Thanks @stefsullrew, it surely solves.

I'll write down the updated markup here for later reference.

  <div class="slds-button-group" role="group">
    <button class="slds-button slds-button--neutral">Save</button>
    <div class="slds-dropdown-trigger slds-button--last">
      <button class="slds-button slds-button--icon-border-filled">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">More Actions</span>
      </button>
      <div class="slds-dropdown slds-dropdown--left slds-text-heading--label slds-dropdown--menu">
        <ul class="slds-dropdown__list" role="menu">
          <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem">Save as</a></li>
          <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem">Delete</a></li>
        </ul>
      </div>
    </div>
  </div>