Menu Classic

Customization	Reference
HTML selector	🔧 [data-arts-component-name="MenuClassic"]
Component source	📄 HTML/js/components/MenuClassic.js
Component source (gulp)	📄 SOURCE/components/menuClassic/MenuClassic.js

Default Options

defaults: {
  hoverDrawEffect: true
}

HTML Markup

<ul
  class="menu-classic"
  data-arts-component-name="MenuClassic"
  data-arts-component-options="{}"
>
  <li>
    <a href="#">Menu Item 1</a>
  </li>
  <li>
    <a href="#">Menu Item 2</a>
  </li>
  <li class="menu-item-has-children">
    <a href="#">Menu Item 3 (submenu)</a>
    <ul class="sub-menu">
      <li>
        <a href="01-01-homepage-light.html">Submenu Item 3.1</a>
      </li>
      <li>
        <a href="01-02-homepage-light.html">Submenu Item 3.2</a>
      </li>
    </ul>
  </li>
  <li class="menu-item-has-children current-menu-ancestor">
    <a href="#">Menu Item 4 (current)</a>
    <ul class="sub-menu">
      <li class="menu-item-has-children current-menu-ancestor">
        <a href="#">Submenu Item 4.1 (current)</a>
        <ul class="sub-menu">
          <li class="current-menu-item">
            <a href="#">Submenu Item 4.1.1 (current)</a>
          </li>
          <li>
            <a href="#">Submenu Item 4.1.2</a>
          </li>
          <li>
            <a href="#">Submenu Item 4.1.3</a>
          </li>
          <li>
            <a href="#">Submenu Item 4.1.4</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>