A dropdown menu in your own design
wp-menu-tree="Header Menu" When the dropdown has its own markup and animation, this attribute keeps it: each WordPress menu item is printed with your pattern.
Where it goes
On the block of the menu, with the menu’s name as the value. Inside, two patterns: wp-menu-tpl="link" for a plain item and wp-menu-tpl="drop" for an item with sub-items.
Inside the patterns: wp="menu-title-link" (the item’s name and address), and wp="menu-children" on the element repeated for each sub-item. When that element is the link itself with a caption, the build puts the sub-item’s name and address into it.
Example: “Menu” with drinks and kitchen
<nav class="nav" wp-menu-tree="Header Menu">
<a href="#" class="nav-link" wp-menu-tpl="link"
wp="menu-title-link">Home</a>
<div class="dropdown" wp-menu-tpl="drop">
<a href="#" class="nav-link" wp="menu-title-link">Menu</a>
<div class="dropdown__list">
<a href="#" class="dropdown__link" wp="menu-children">Drinks</a>
</div>
</div>
</nav>- Home
- Menu
- — Drinks
- — Kitchen
- Contacts
What matters
- Any number of levels:
wp="menu-children"inside a sub-item prints the next level down. - With only one pattern, every item uses it.
- For a simple menu wp-menu is shorter.
Common mistakes
The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.
<nav wp-menu-tree="Header Menu">
<div class="item">
<a href="#" wp="menu-title-link">Menu</a>
<div class="sub" wp="menu-children">
<span class="sub__text">Drinks</span>
</div>
</div>
</nav>The repeated sub-item has its own markup but no name mark: every sub-item prints the same text. The build logs it.
<nav wp-menu-tree="Header Menu">
<div class="item">
<a href="#" wp="menu-title-link">Menu</a>
<div class="sub" wp="menu-children">
<span class="sub__text" wp="menu-title">Drinks</span>
</div>
</div>
</nav>The sub-item’s caption carries wp="menu-title" or wp="menu-title-link".
Alternative spelling
wp_menu_tree works the same: the build gives an identical theme.