---
schema_version: "1"
id: d56e7eef42c0c9f97aee3903307e53d6c8cdedf15ffc38a39685ca50b30255c7
title: Create Custom Search and Profile Menu Components for Experience Builder
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/components/components-config-for-builder-search-and-profile.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/components-config-for-builder-search-and-profile.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 25bc642997ae5d74a1d9f78c0e5fe6e3e2e254df9a132d1b8fb926c5b19e653b
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Create Custom Search and Profile Menu Components for Experience Builder

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

## `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 Customer Service site 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.

Here’s the sample code for a simple profile menu component.

<!-- otherprops: set_clipboard -->
```nolang
<aura:component implements="forceCommunity:profileMenuInterface" access="global">
    <aura:attribute name="options" type="String[]" default="['Option 1', 'Option 2']"/>
    <lightning:avatar variant="circle" src="" fallbackIconName="standard:person_account" alternativeText="Account User"/>
    <lightning:buttonMenu alternativeText="Profile Menu" variant="container" iconName="utility:connected_apps">
        <aura:iteration items="{!v.options}" var="itemLabel">
            <lightning:menuItem label="{!itemLabel}" />
        </aura:iteration>        
    </lightning:buttonMenu>
</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 Customer Service site 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.

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

<!-- otherprops: set_clipboard -->
```nolang
<aura:component implements="forceCommunity:searchInterface" access="global">
    <div onkeyup="{! c.handleKeyUp }">
    <lightning:input
            aura:id="search-input"
            label="Search"
            type="search"
            variant="label-hidden"
        />
    </div>
</aura:component>
```

```javascript
({
    handleKeyUp: function (cmp, evt) {
        var isEnterKey = evt.keyCode === 13;
        if (isEnterKey) {
            var queryTerm = cmp.find('search-input').get('v.value');
            //do something with user input
        }
    }
})
```

**See Also**  


-   [Create Custom Theme Layout Components for Experience Builder](https://developer.salesforce.com/docs/platform/aura-platform/guide/components-config-for-builder-theme-layout.md)
-   [*Salesforce Help*: Custom Theme Layouts and Theme Layout Types](https://help.salesforce.com/HTViewHelpDoc?id=community_builder_theme.htm)