Custom Profile Menu Components for Communities

Here we will see how to customize the profile menu in lightning the customize the profile menu in communities you need to use forceCommunity:profileMenuInterface interface in your custom component. Add the forceCommunity:profileMenuInterface interface to a Lightning component to allow it to be used as a custom profile menu component for the Customer Service community template. After you create a custom profile menu component, admins can select it in Community Builder in Settings | Theme to replace the templateā€™s standard Profile Header component. Here is the sample lightning component but this component is just printing the selected value from the profile menu to the browser console.

<aura:component implements="forceCommunity:profileMenuInterface" access="global">
    <aura:attribute name="options" type="String[]" default="Home, My Profile , My Messages , My Options ,Dashboards ,Settings ,LogOut"/>
    <ui:menu >
        <ui:menuTriggerLink aura:id="trigger" label="Profile Menu"/>
        <ui:menuList class="actionMenu" aura:id="actionMenu">
            <aura:iteration items="{!v.options}" var="itemLabel">
                <ui:actionMenuItem label="{!itemLabel}" click="{!c.handleClick}"/>


    handleClick : function(component, event, helper) {
        var source = event.getSource();
        var label = source.get("v.label");
        if(label=="My Profile"){
            // do some work ..

Adding the Component to Profile Menu 

Now go to the communities from the and edit the community with a builder.

Then select the settings

The click on the theme and configure the profile menu as shown below.


After configuring your profile page looks as shown below