Menus & Navigation

Navigation Menus

BuddyX Pro provides multiple menu locations for comprehensive site navigation.

Menus Settings

Menu configuration in the Customizer

Menu Locations

BuddyX Pro registers 7 menu locations:

Primary Menus

LocationDescription
Primary – Logged in usersMain header navigation for logged-in members
Primary – Logged out usersMain header navigation for visitors

Mobile Menus

LocationDescription
Mobile Menu – Logged in usersMobile navigation for logged-in members
Mobile Menu – Logged out usersMobile navigation for visitors

Side Panel Menus

LocationDescription
Side Menu – Logged in usersSide panel menu for logged-in members
Side Menu – Logged out usersSide panel menu for visitors

User Menu

LocationDescription
User MenuUser account dropdown menu in header

Creating Menus

Step 1: Create a Menu

  1. Go to Appearance → Menus
  2. Click Create a new menu
  3. Enter a menu name (e.g., “Main Menu”)
  4. Click Create Menu

Step 2: Add Menu Items

Add items from:

  • Pages – Site pages
  • Posts – Blog posts
  • Custom Links – External URLs
  • Categories – Post categories
  • BuddyPress – Community pages (if active)
  • WooCommerce – Shop pages (if active)

Step 3: Assign Location

  1. Scroll to Menu Settings
  2. Check the desired location(s)
  3. Click Save Menu

Menu Configuration

Logged In vs Logged Out Menus

BuddyX Pro shows different menus based on login status:

Logged In Users See:

  • Member dashboard links
  • Profile and settings
  • Logout option
  • Community features

Logged Out Users See:

  • Login/Register links
  • Public pages only
  • Promotional content

Setting Up Both Menus

  1. Create a “Main Menu (Logged In)” menu
  2. Create a “Main Menu (Logged Out)” menu

Mobile Menu

The mobile menu appears on screens below the responsive breakpoint.

Mobile Menu Setup

  1. Create a menu specifically for mobile
  2. Keep it simpler than desktop menu
  3. Assign to: Mobile Menu – Logged in/out users

Tips for Mobile Menus:

  • Limit to 6-8 top-level items
  • Use shorter link text
  • Prioritize important links
  • Test on actual devices

Side Panel Menu

The side panel (hamburger menu) provides additional navigation.

Enabling Side Panel

  1. Go to Appearance → Customize → Side Panel
  2. Enable the side panel
  3. Configure display options

Side Panel Menu Setup

  1. Create a menu for the side panel
  2. Assign to: Side Menu – Logged in/out users
  3. Consider vertical layout when designing

User Menu

The user menu appears when clicking the user avatar in the header.

User Menu Contents

Typically includes:

  • Profile link
  • Account settings
  • Dashboard
  • Orders (if WooCommerce)
  • Courses (if LearnDash)
  • Logout

Setting Up User Menu

  1. Create a “User Menu” menu
  2. Add user-specific links
  3. Assign to: User Menu location

Menu Icons

Add icons to menu items using CSS classes.

Using FontAwesome Icons

  1. Edit a menu item
  2. In CSS Classes field, add: menu-icon fas fa-home
  3. Save the menu

Common icons:

  • fas fa-home – Home
  • fas fa-user – Profile
  • fas fa-cog – Settings
  • fas fa-shopping-cart – Cart
  • fas fa-sign-out-alt – Logout

Enabling CSS Classes Field

  1. Click Screen Options at top of Menus page
  2. Check CSS Classes
  3. The field now appears for each menu item

Dropdown Menus

Create multi-level navigation with dropdowns.

Creating Dropdowns

  1. Add menu items normally
  2. Drag child items slightly to the right
  3. They indent under the parent item
  4. Save the menu

Dropdown Behavior

  • Desktop: Hover to reveal dropdown
  • Mobile: Tap to expand/collapse
  • Auto-close when clicking elsewhere

BuddyPress Menu Items

When BuddyPress is active, additional menu items are available:

ItemDescription
ActivityActivity feed
MembersMembers directory
GroupsGroups directory
ProfileCurrent user’s profile
SettingsAccount settings

Adding BuddyPress Items

  1. In the menu editor, find BuddyPress section
  2. Check desired items
  3. Click Add to Menu

WooCommerce Menu Items

When WooCommerce is active:

ItemDescription
ShopProduct archive
CartShopping cart
CheckoutCheckout page
My AccountAccount dashboard

Menu Settings

Display Options

In Menu Settings at bottom of menu editor:

  • Auto add pages – Automatically add new top-level pages
  • Menu locations – Where the menu appears

Screen Options

Click Screen Options to show/hide:

  • CSS Classes
  • Link Target
  • Title Attribute
  • Link Relationship (XFN)
  • Description

Best Practices

Navigation Structure

  • Limit top-level items to 6-8
  • Use clear, descriptive labels
  • Group related items in dropdowns
  • Place important items first

Accessibility

  • Use descriptive link text
  • Avoid “Click Here” or “Read More”
  • Maintain logical order
  • Test keyboard navigation

Mobile Considerations

  • Test on actual devices
  • Consider thumb-friendly placement
  • Keep text concise
  • Limit nesting depth

Troubleshooting

Menu Not Appearing

  1. Verify menu is assigned to location
  2. Check if location is displayed in header
  3. Clear any caching
  4. Check theme customizer settings

Dropdowns Not Working

  1. Check for JavaScript errors
  2. Verify parent item has children
  3. Test with plugins disabled
  4. Check CSS for conflicts

Mobile Menu Issues

  1. Resize browser to trigger mobile view
  2. Check mobile menu is assigned
  3. Verify hamburger icon is enabled
  4. Test touch interactions

Related Documentation

Last updated: January 31, 2026