WP Menu

Display WordPress navigation menus dynamically

Overview

The WP Menu element renders WordPress navigation menus created in Appearance → Menus. It uses the wp_nav_menu() function internally to dynamically output menu items as an unordered list with customizable classes.

This element is ideal for headers, footers, and any location where you need dynamic navigation that administrators can manage through the WordPress menu system. The menu automatically updates when items are added, removed, or reordered in the WordPress admin.

Default output is a <nav> element containing a <ul> with nested <li> and <a> elements. You can apply Tailwind classes to the container, list, items, and links independently for full styling control.

Create Menus First

Before using this element, create your menus in WordPress Admin → Appearance → Menus. Assign menus to locations (Primary, Footer, etc.) to make them available for selection in the builder.

Settings

Configure the WP Menu element using these Inspector options:

Setting Description Default
Menu ID WordPress menu location or menu ID to display. Use location slugs like primary, footer, or numeric menu IDs. primary
Menu Class CSS classes applied to the <ul> menu container. Use Tailwind utilities like flex gap-4 for horizontal layouts. (empty)
Item Class CSS classes applied to each <li> menu item. Useful for adding hover states or spacing between items. (empty)
Link Class CSS classes applied to each <a> link. Style link colors, hover effects, and typography here. (empty)
Depth Maximum depth of menu items to display. Set to 0 for unlimited, 1 for top-level only, 2 for two levels, etc. 0

Examples

Basic Navigation

A simple horizontal navigation menu using the primary menu location with flexbox layout.

<nav>
  <ul class="flex gap-6">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Styled Horizontal Menu

A polished header menu with hover effects and proper typography. Apply these classes through the Menu Class, Item Class, and Link Class settings.

<!-- Settings: -->
<!-- Menu Class: flex items-center gap-8 -->
<!-- Item Class: relative -->
<!-- Link Class: text-gray-700 hover:text-primary font-medium transition-colors -->

<nav>
  <ul class="flex items-center gap-8">
    <li class="relative">
      <a href="/" class="text-gray-700 hover:text-primary font-medium transition-colors">Home</a>
    </li>
    <li class="relative">
      <a href="/about" class="text-gray-700 hover:text-primary font-medium transition-colors">About</a>
    </li>
    <li class="relative">
      <a href="/services" class="text-gray-700 hover:text-primary font-medium transition-colors">Services</a>
    </li>
  </ul>
</nav>

For menus with submenus, set Depth to 2 or higher. WordPress automatically adds menu-item-has-children and sub-menu classes that you can target with CSS for dropdown styling.

<!-- Settings: -->
<!-- Depth: 2 -->
<!-- Menu Class: flex gap-6 -->

<nav>
  <ul class="flex gap-6">
    <li><a href="/">Home</a></li>
    <li class="menu-item-has-children relative group">
      <a href="/services">Services</a>
      <ul class="sub-menu absolute hidden group-hover:block bg-white shadow-lg rounded-lg py-2">
        <li><a href="/services/web-design" class="block px-4 py-2">Web Design</a></li>
        <li><a href="/services/development" class="block px-4 py-2">Development</a></li>
      </ul>
    </li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Next Steps