Create Custom Search and Profile Menu Components for Communities

Create custom components to replace the Customer Service (Napili) template’s standard Profile Header and Search & Post Publisher components in Community Builder.

forceCommunity:profileMenuInterface

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 (Napili) 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’s the sample code for a simple profile menu component.

<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>
</aura:component>

forceCommunity:searchInterface

Add the forceCommunity:searchInterface interface to a Lightning component to allow it to be used as a custom search component for the Customer Service (Napili) community template. After you create a custom search component, admins can select it in Community Builder in Settings | Theme to replace the template’s standard Search & Post Publisher component.

Here’s the sample code for a simple search component.

<aura:component implements="forceCommunity:searchInterface" access="global">
    <div class="search">
        <div class="search-wrapper">
            <form class="search-form">
                <div class="search-input-wrapper">
                    <input class="search-input" type="text" placeholder="My Search"/>
                </div>
                <input type="hidden" name="language" value="en" />
            </form>
        </div>
    </div>
</aura:component>