Experience Cloud Developer Guide

Get Up to Speed with Experience Builder Sites
Develop Experience Builder Sites: The Basics
Customize the Look and Feel of an Experience Builder Template
Update a Template with the Theme Panel
Override Template Elements with Custom CSS
Use Custom Fonts in Your Experience Builder Site
Customize the Theme Layout of Your Template
Use Expressions to Add Dynamic Data to Aura Sites
Create Custom Content Layout Components for Experience Builder
Configure Swappable Search and Profile Menu Components
Standard Design Tokens for Experience Builder Sites
Ensure Custom Components in Orgs with Experience Cloud Sites Are Secure
Develop Secure Sites: Authenticated and Guest Users
Develop Secure Sites: CSP, LWS, and Lightning Locker
Analyze and Improve Experience Builder Site Performance
Add Pardot Tracking to Your Experience Builder Site
Use a CMS with Your Experience Builder Site
Report on Deflections: The Deflection Signals Framework
Deploy an Experience Cloud Site from Sandbox to Production
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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
Template Header

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>