WordPress Menu HTML Structure

by seankoole

HTML

For every menu we must set a base style class to be able to style it.

If you are using the same styling for multiple menus, then use the same class.


Normal menu
ul#menu-header-menu>li.menu-item

<div class="">
  <ul id="">
    <li class="menu-item"></li>
  </ul>
</div>


Menu with sub navigation
ul#menu-header-menu>li.menu-item.menu-item-has-children>ul.sub-menu>li.menu-item

<div class="">
  <ul id="" class="">
    <li class="menu-item menu-item-has-children">
      <ul class="sub-menu">
        <li class="menu-item"></li>
      </ul>
    </li>
  </ul>
</div>


Normal menu (Active state)
ul#menu-header-menu>li.menu-item.current-menu-item

<div class="">
  <ul id="" class="">
    <li class="menu-item current-menu-item"></li>
  </ul>
</div>


Menu with sub navigation (Active State)
ul#menu-header-menu>li.menu-item.menu-item-has-children.current-menu-parent>ul.sub-menu>li.menu-item.current-menu-item

<div class="">
  <ul id="" class="">
    <li class="menu-item menu-item-has-children current-menu-parent">
      <ul class="sub-menu">
        <li class="menu-item current-menu-item"></li>
      </ul>
    </li>
  </ul>
</div>