lightning:buttonMenu don't show on bottom

Question

I've a lightning:buttonMenu in my footer:

Component:

<lightning:buttonMenu aura:id="menu" alternativeText="Show menu" onselect="{! c.handleSelect }">
    <lightning:menuItem aura:id="menuItems" label="Menu Item 1" value="tableView" checked="false" iconName="utility:table"/>
    <lightning:menuItem aura:id="menuItems" label="Menu Item 2" value="kanbanBoard" checked="false" iconName="utility:kanban"/>
</lightning:buttonMenu>

I found this class slds-dropdown_bottom as a possible solution, but when it's applied the entire component goes up, not only the menu items:

<lightning:buttonMenu aura:id="menu" alternativeText="Show menu" onselect="{! c.handleSelect }" class="slds-dropdown_bottom">

How can I do something like this and keep using lightning:buttomMenu:

Answer 1

I solved my problem using ui:menu:

Component:

<aura:component>
    <aura:attribute name="menuItems" type="Object[]"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <ui:menu>
        <ui:menuTriggerLink aura:id="checkboxMenuLabel">
            <lightning:buttonIcon iconName="utility:chevronup" variant="border-filled" size="large"/>
        </ui:menuTriggerLink>
        <ui:menuList aura:id="checkboxMenu" class="checkboxMenu">
            <aura:iteration items="{!v.menuItems}" var="item">
                <ui:actionMenuItem label="{!item.name}" selected="false">
                    <div class="slds-no-flex" onclick="{!c.handleMenuClick}" data-value="{!item.action}">
                        <lightning:icon iconName="{!item.icon}" size="xx-small" />&nbsp;{!item.name}
                    </div>
                </ui:actionMenuItem>
            </aura:iteration>
        </ui:menuList>
    </ui:menu>
</aura:component>

JS Controller

({
    doInit : function(component, event, helper) {
        const menuItems = [
            {'name': $A.get("$Label.c.Menu_Item_Multi_Select"), 'icon': 'utility:multi_select_checkbox', 'action': 'select_all'},
            {'name': $A.get("$Label.c.Menu_Item_Delete"), 'icon': 'utility:delete', 'action': 'remove_all'},
            {'name': $A.get("$Label.c.Menu_Item_Lock"), 'icon': 'utility:lock', 'action': 'lock_all'},
            {'name': $A.get("$Label.c.Menu_Item_Unlock"), 'icon': 'utility:unlock', 'action': 'unlock_all'}
        ];

        component.set('v.menuItems', menuItems);
    },

    handleMenuClick : function( component, event, helper ){
        var globalAction = event.target.getAttribute("data-value");
        switch(globalAction){
            case 'select_all':
                //TODO: Do whathever you want here
                break;
            case 'remove_all':
                //TODO: Do whathever you want here
                break;
            case 'lock_all':
                //TODO: Do whathever you want here
                break;
            case 'unlock_all':
                //TODO: Do whathever you want here
                break;
        }
    },
})