BuddyX
Get BuddyX Pro

Navigation Menus

Pro feature

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

Location Description
Primary - Logged in users Main header navigation for logged-in members
Primary - Logged out users Main header navigation for visitors

Mobile Menus

Location Description
Mobile Menu - Logged in users Mobile navigation for logged-in members
Mobile Menu - Logged out users Mobile navigation for visitors

Side Panel Menus

Location Description
Side Menu - Logged in users Side panel menu for logged-in members
Side Menu - Logged out users Side panel menu for visitors

User Menu

Location Description
User Menu User 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

    • Assign to: Primary - Logged in users

  2. Create a "Main Menu (Logged Out)" menu

    • Assign to: Primary - Logged out users

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:

Item Description
Activity Activity feed
Members Members directory
Groups Groups directory
Profile Current user's profile
Settings Account 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:

Item Description
Shop Product archive
Cart Shopping cart
Checkout Checkout page
My Account Account 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