0

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>

lightning:menuItem

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">

elevated buttom menu

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

enter image description here

  • Menus are meant to be shown in a header, not a footer. You should strive to follow SLDS designs. – sfdcfox May 27 at 15:07
0

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;
        }
    },
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.