Setting Up the User Menu Module

With the User Menu Module, you can add a login-aware navigation element to any page of your Soapbox site. When a visitor is not logged in, the module displays a "Sign In" button that links to a login page of your choice. When a visitor is logged in, the button is replaced by their avatar — or their initials in a circle if no avatar is set — and clicking it opens a dropdown that shows their account details and links from a menu you select.

To add the User Menu Module to your site:

1. In the administrator, navigate to Module Manager.
2. Click New in the toolbar.
3. From the module type list, select User Menu.
4. For Title, enter a name for the module. This title is for your reference in the administrator.
5. For Show Title, select No if you do not want the module title displayed on the front end.
6. For Enabled, select Yes to publish the module.
7. For Position, select the position on your template where you want the module to appear. When using the standard template for your site, you can select the login_nav position.
8. Under Menu Assignment, select the pages on which the module should display. Generally, you will set this module to All.
9. Click the Parameters section to expand it, then expand Module Parameters.
10. Configure the Sign In settings, logged-in user header settings, and Sign Out settings as described below.
11. Click Save & Close.

---

Sign In settings

These settings control what visitors see when they are not logged in.

For Menu Name, select the menu whose items will appear in the dropdown for logged-in users.

For Login Button Text, enter the label you want displayed on the button shown to logged-out visitors. If left blank, the button defaults to Sign In.

For Login Redirect URL, enter the relative URL of the page to which visitors are sent when they click the Sign In button. For example, to send visitors to `https://www.example.com/login`, enter `/login`. If left blank, no redirect is applied.

For Use Default Sign In Button CSS, select Yes to apply the module's built-in button styling, or No to style the button using your template's Custom CSS. When set to No, the module's CSS classes remain on the button so you can target them in your custom styles.

---

Logged-in user header settings

These settings control what appears in the header area of the dropdown when a logged-in visitor clicks their avatar.

For Show Avatar, select Yes to display the visitor's avatar image in the dropdown header. If the visitor has no avatar set on their account, their initials are displayed in a circle as a fallback. Select No to hide both the avatar and the initials circle.

For Default Avatar Background Color, enter the hexadecimal color code to use as the background of the initials circle when a visitor has no avatar (for example, `#808080`). This field has no effect when a visitor has an avatar.

For Show Name, select Yes to display the visitor's full name in the dropdown header, or No to hide it.

For Show Email, select Yes to display the visitor's email address in the dropdown header, or No to hide it.

For Show Username, select Yes to display the visitor's username in the dropdown header, or No to hide it.

---

Sign Out settings

For Show Sign Out Button, select Yes to display a Sign Out button at the bottom of the dropdown, or No to hide it.

Note: Using a dedicated Sign Out button in the module is recommended over relying on a Sign Out link in the menu. The Sign Out button always appears at the bottom of the dropdown regardless of how menu items are ordered or changed.

For Sign Out Button Text, enter the label to display on the Sign Out button. If left blank, the button defaults to Sign Out.

---

What visitors see on the front end

Logged-out visitors see the Sign In button using the text from the Login Button Text parameter. Clicking it sends them to the URL entered in Login Redirect URL.

Logged-in visitors see their avatar — or their initials in a circle — in place of the Sign In button. Clicking it opens a dropdown that includes:

• A header with the visitor's avatar or initials, along with any name, email address, or username fields that are set to Yes
• The menu items from the menu selected in Menu Name
• A Sign Out button at the bottom, if Show Sign Out Button is set to Yes

The dropdown closes when the visitor clicks anywhere else on the page.

---

Customizing the module's appearance

The module includes a base stylesheet that provides default styling. You can override any of these defaults using a standard template's Custom CSS field in the Template Designer. The module uses CSS class names unique to it, so custom styles will not affect other menus on your site.

If you have a custom template and would like to style the menu to match your site, please open a ticket.