[SalesForce] LWC lightning-button-menu alignment

I use lightning-button-menu component and would like to align the menu top.
I found that it can be aligned left or right, but it there a possibility to align top?

<lightning-button-menu alternative-text="Export options"
                       variant="bare"
                       icon-name="utility:threedots_vertical"
                       menu-alignment="right">
     <lightning-menu-item value="pfd" 
                          label="Export to PDF">
     </lightning-menu-item>
     <lightning-menu-item value="xls" 
                          label="Export to Excel">
     </lightning-menu-item>
</lightning-button-menu>

Best Answer

Sure you can do it. The Lightning Design System specified this functionality: https://www.lightningdesignsystem.com/components/menus/#Positioned-Bottom

and also the mentioned LWC component implemented it too: https://developer.salesforce.com/docs/component-library/bundle/lightning:buttonMenu/specification

You need to use either bottom-left, bottom-center or bottom-right values in the menu-alignment argument.

Related Solutions

[SalesForce] LWC template button controls alignment issue

If you want the parent of the floated element to contain the floats, add the .slds-clearfix class to the parent.

Add the class to the footer div as shown below:

<div class="slds-clearfix slds-var-m-top_small" slot="footer">
    <lightning-button class="slds-float_right" label="Next" title="Next" variant="brand"
                onclick={handleNextNavigation}>
    </lightning-button>
</div>

Refer documentation here

Placing button menu in lightning-tile lwc

The Tile blueprint provided by the Lightning Design System shows how to accomplish this.

The key piece you're missing is using slds-grid and slds-grid_align-spread to put the title and actions in the same row, spread aligned to the left and right.

  <article class="slds-tile">
    <div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
      <h3 class="slds-tile__title slds-truncate" title="Tile Title">
        <a href="#">Tile Title</a>
      </h3>
      <div class="slds-shrink-none">
        <!-- Put your button menu here -->
      </div>
    </div>
    <div class="slds-tile__detail">
      <!-- Tile Content -->
    </div>
  </article>

Best Answer

Related Solutions

[SalesForce] LWC template button controls alignment issue

Placing button menu in lightning-tile lwc

Related Topic