Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Configure Swappable Search and Profile Menu Components

Create custom components to replace the template’s standard Profile Header and Search & Post Publisher components in Experience Builder.

In Customer Service, for example, the Template Header consists of these locked regions:

search, which contains the Search Publisher component
profileMenu, which contains the Profile Header component
navBar, which contains the Navigation Menu component

These designated region names let you easily:

Swap search and profile components in the default theme layout component or a custom theme layout component.
Swap theme layout components while persisting existing customizations, such as the selected search component.

When a component implements the correct interface—forceCommunity:searchInterface or forceCommunity:profileMenuInterface, in this case—it’s identified as a candidate for these regions. They therefore appear as swappable components in a theme layout component, such as the default Customer Service theme layout component, which declares search or profileMenu as an attribute name value.

1<aura:attribute name="search" type="Aura.Component[]" required="false" />

forceCommunity:profileMenuInterface

Add the forceCommunity:profileMenuInterface interface to an Aura component to allow it to be used as a custom profile menu component for the template. After you create a custom profile menu component, admins can select it in Experience Builder in Settings | Theme to replace the template’s standard Profile Header component.

This code is for a simple profile menu component.

1<aura:component implements="forceCommunity:profileMenuInterface" access="global">
2    <aura:attribute name="options" type="String[]" default="Option 1, Option 2"/>
3    <ui:menu >
4        <ui:menuTriggerLink aura:id="trigger" label="Profile Menu"/>
5        <ui:menuList class="actionMenu" aura:id="actionMenu">
6            <aura:iteration items="{!v.options}" var="itemLabel">
7                <ui:actionMenuItem label="{!itemLabel}" click="{!c.handleClick}"/>
8            </aura:iteration>
9        </ui:menuList>
10    </ui:menu>
11</aura:component>

forceCommunity:searchInterface

Add the forceCommunity:searchInterface interface to an Aura component to allow it to be used as a custom search component for the template. After you create a custom search component, admins can select it in Experience Builder in Settings | Theme to replace the template’s standard Search & Post Publisher component.

This code is for a simple search component.

1<aura:component implements="forceCommunity:searchInterface" access="global">
2    <div class="search">
3        <div class="search-wrapper">
4            <form class="search-form">
5                <div class="search-input-wrapper">
6                    <input class="search-input" type="text" placeholder="My Search"/>
7                </div>
8                <input type="hidden" name="language" value="en" />
9            </form>
10        </div>
11    </div>
12</aura:component>

Experience Cloud Developer Guide

Configure Swappable Search and Profile Menu Components

forceCommunity:profileMenuInterface

forceCommunity:searchInterface

See Also