Add standard 'My Profile' component to a custom header lightning component

Question

We've built a custom lightning component that we’re using as the header in our Napili template. We’re trying to incorporate the standard ‘Profile Header’ component into our custom header (or something similar). I couldn’t find anything online about the code behind the profile header component. Does anyone have any suggestions?

Answer 1

You should be using new custom theming for this

<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout">
<aura:attribute name="search" type="Aura.Component[]" required="false"/>
<aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/>
<aura:attribute name="navBar" type="Aura.Component[]" required="false"/>
<aura:attribute name="newHeader" type="Aura.Component[]" required="false"/>
<div>
    <div class="searchRegion">
        {!v.search}
    </div>
    <div class="profileMenuRegion">
        {!v.profileMenu}
    </div>
    <div class="navigation">
        {!v.navBar}
    </div>
    <div class="newHeader">
        {!v.newHeader}
    </div>
    <div class="mainContentArea">
        {!v.body}
    </div>
</div>

If you still want to override the profileMenu you can do using below code

<aura:component implements="forceCommunity:profileMenuInterface" access="global">
<aura:attribute name="options" type="String[]" default="Option 1, Option 2"/>
<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}"/>
        </aura:iteration>
    </ui:menuList>
</ui:menu>

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