---
schema_version: "1"
id: 27da80cc829406d7bf0feb8a31e3734c7955e67593d710504c35f0940aa2ff1c
title: Customizable User Profile Menu
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/rss_customizable_user_profile_menu.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.rss_customizable_user_profile_menu.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: f126fc5a8161952ebeaf0c1d59c771fcc5da4816168eb72da78d3cb5260a37ac
description: The Customizable User Profile Menu component displays a user’s name or nickname and profile picture. It can also display a company name or icon. If the user isn’t logged in, a Login button appears in the header. Starting in Summer ‘20, the Customizable User Profile Menu component replaces the User Profile component in Experience Builder sites using the new B2B Commerce Template and new sites using specific themes, including Ember, Stella, Webster, Citizen, Cypress, and Jepson. Existing sites using those themes get the new component instead of the old version when they reapply or change the theme.
products:
  - Experiences
release: "264"
---
# Customizable User Profile Menu

The Customizable User Profile Menu component displays a user’s name or nickname and profile picture. It can also display a company name or icon. If the user isn’t logged in, a Login button appears in the header. Starting in Summer ‘20, the Customizable User Profile Menu component replaces the User Profile component in Experience Builder sites using the new B2B Commerce Template and new sites using specific themes, including Ember, Stella, Webster, Citizen, Cypress, and Jepson. Existing sites using those themes get the new component instead of the old version when they reapply or change the theme.

1. In the page that you’re configuring, click the header component to open the property editor.
2. Expand the Layout section, and select the Customizable User Profile Menu component in the User Profile Component dropdown.
3. Click the Customizable User Profile Menu component to open its property editor.
4. In the property editor, configure the properties for the component.
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:28.000000000000004%">
              <col style="width:72%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d112666e61">Property</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d112666e64">Details</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e61 ">
                  <samp class="parmname">Login Label</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e64 ">Enter a label for the Login button that members use to log in to the site. The
                  default is Log In.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e61 ">
                  <samp class="parmname">Text Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e64 ">Choose the color of the text for the log in button.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e61 ">
                  <samp class="parmname">Text Hover Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e64 ">Choose the color of the text when the user is hovering over the log in
                  button.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e61 ">
                  <samp class="parmname">Background Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e64 ">Choose the background color of the log in button.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e61 ">
                  <samp class="parmname">Background Hover Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e64 ">Choose the background color to show when the user is hovering over the log in
                  button.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e61 ">
                  <samp class="parmname">Border Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e64 ">Choose the border color of the log in button.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e61 ">
                  <samp class="parmname">Border Radius (0px - 50px)</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e64 ">Set the radius of the button border.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e61 ">
                  <samp class="parmname">Default Menu</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e64 ">Choose the default navigation menu to show to authenticated users. To edit your menu
                  selection, click the <strong class="uicontrol">Edit</strong> button.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e61 ">
                  <samp class="parmname">Menu Style for Authenticated Users</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e64 ">
                  <p>Choose whether to display a menu icon, the user’s name, or both. </p>
                  <p style="margin-bottom:0;">On mobile
                    devices, only the icon is shown.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e61 ">
                  <samp class="parmname">Icon</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e64 ">Choose whether to use a company logo or an avatar as the menu icon.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e61 ">
                  <samp class="parmname">Include Company Name</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e64 ">Opt to include the company name in the user profile menu. The default is to omit
                  it.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e61 ">
                  <samp class="parmname">Text Orientation</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d112666e64 ">Choose whether to display the company name to the right or left of the icon.</td>

              </tr>
            </tbody>
          </table>

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_note.png)

Note

- When you import a B2B Commerce template, the My Account and Lists options on navigation menus are dropped. Edit the menu, like the Customizable User Profile menu, and recreate these menu options.
- Menu item types system link and event display only in the Customizable User Profile Menu component.