1. Docs
  2. BuddyBoss Theme
  3. Profile Dropdown

Profile Dropdown

In this tutorial, you will learn how to completely customize the Profile Navigation dropdown. You can add menus, remove menus, re-order menus, and add custom icons to any menu in the dropdown. This also overrides the profile menus in the WordPress admin bar.

This customization also overrides the profile menus in the WordPress admin menu bar.

Customizing the Profile Navigation Dropdown

The Profile Navigation Dropdown menu has always been a part of the BuddyBoss Theme. You can add additional menu items and these will be registered in the BuddyBoss Platform as well as the Theme. To customize it:

  1. Go to WordPress Dashboard > Appearance > Menus.
  2. Click the Create a new menu link to create a new menu and customize it.
  3. Add a title for the menu. For example, enter Profile Menu in the Menu Name textbox.
  4. Select the Profile Dropdown in the Display Location options and then click the Create Menu button.
Profile Navigation Dropdown - Creating a new menu
Profile Navigation Dropdown – Creating a new menu
  1. In the Add menu items > BuddyBoss meta box, mark the preferred menu items you want to add to the menu bar. For example, mark the Profile, View, Edit, Profile Photo, Cover Photo, etc. menu items to be added to the menu bar and then click the Add to Menu button.
Profile Navigation Dropdown - Adding menu items to the new menu
Profile Navigation Dropdown – Adding menu items to the new menu

You can mark as many menu items as preferred to be added in the menu.

  1. Drag and drop the menu items to set the hierarchy and sub-menu items and then click the Save Menu button.
Profile Navigation Dropdown - Customized profile navigation dropdown preview
Profile Navigation Dropdown – Customized profile navigation dropdown preview
Profile Navigation Dropdown - Customized WordPress admin menu bar preview
Profile Navigation Dropdown – Customized WordPress admin menu bar preview

Removing the icons for the menu items

You can choose to remove the icons for the profile navigation dropdown menu items. To remove the icons:

  1. Go to WordPress Dashboard > Appearance > Menus.
  2. Click the Edit Menus tab and select the menu you want to edit. For example, select the Profile Menu (Profile Dropdown) menu to edit it.
  3. Select the preferred menu item and click the Remove link in the Icon option to remove the icon for the menu item.
Profile Navigation Dropdown - Removing the icon for the menu items
Profile Navigation Dropdown – Removing the icon for the menu items
  1. Click the Save Menu button.

Changing the icons for the menu items

You can choose to add custom icons for the profile navigation dropdown menu items. To customize the icons:

  1. Go to WordPress Dashboard > Appearance > Menus.
  2. Click the Edit Menus tab and select the menu you want to edit. For example, select the Profile Menu (Profile Dropdown) menu to edit it.
  3. Select the preferred menu item and click the Remove link in the Icon option to remove the existing icon for the menu item. OR
    Select the preferred menu item and click the Select link in the Icon option to add a new icon for the menu item.
Profile Navigation Dropdown - Customizing the icon of a menu item
Profile Navigation Dropdown – Customizing the icon of a menu item
  1. Search the preferred icon and then select it for the menu item. Click the Select button.
Profile Navigation Dropdown - Selecting a custom icon for a menu item
Profile Navigation Dropdown – Selecting a custom icon for a menu item

The available icon types are BuddyBoss, Dashicons, Elusive, Font Awesome, Foundation, Genericons, Image, and SVG.

  1. Click the Save Menu button.
Profile Navigation Dropdown - Customized menu item icon preview
Profile Navigation Dropdown – Customized menu item icon preview

Questions?

We're always happy to help with code or other questions you might have! Search our documentation, contact support, or connect with our sales team.