Menu generator

Restore

Generate minified output Enable preview

<!--[ Standard menu (1) ]-->
<li>
  <a aria-label="Blog" href="https://example.com/search/label/Blog" itemprop="url">
    <!--[ Icon ]-->
    <svg class="line" viewBox="0 0 24 24"><path d="M22 11V17C22 21 21 22 17 22H7C3 22 2 21 2 17V7C2 3 3 2 7 2H8.5C10 2 10.33 2.44 10.9 3.2L12.4 5.2C12.78 5.7 13 6 14 6H17C21 6 22 7 22 11Z" stroke-miterlimit="10"></path><path d="M8 2H17C19 2 20 3 20 5V6.38" stroke-miterlimit="10"></path></svg>
    <!--[ Title ]-->
    <span itemprop="name">Blog</span>
  </a>
</li>

<!--[ Dropdown Menu (2) ]-->
<li class="br">
  <input id="nav-menu-2-state" type="checkbox" checked=""/>
  <label for="nav-menu-2-state" role="button" aria-label="Categories">
    <!--[ Icon ]-->
    <svg class="line" viewBox="0 0 24 24"><path d="M4.21995 3.09998H15.6599C16.3399 3.09998 17.19 3.56998 17.55 4.14998L21.73 10.83C22.13 11.48 22.09 12.5 21.63 13.11L16.45 20.01C16.08 20.5 15.28 20.9 14.67 20.9H4.21995C2.46995 20.9 1.40999 18.98 2.32999 17.49L5.09995 13.06C5.46995 12.47 5.46995 11.51 5.09995 10.92L2.32999 6.48998C1.40999 5.01998 2.47995 3.09998 4.21995 3.09998Z" stroke-miterlimit="10"></path></svg>
    <!--[ Title ]-->
    <span itemprop="name">Categories</span>
  </label>
  <ul>
    <!--[ Sub Menu (2.1) ]-->
    <li>
      <a aria-label="Photography" href="#" itemprop="url">
        <!--[ Icon ]-->
        <svg class="line" viewBox="0 0 24 24"><path d="M6.76005 22H17.24C20 22 21.1 20.31 21.23 18.25L21.75 9.99C21.89 7.83 20.17 6 18 6C17.39 6 16.83 5.65 16.55 5.11L15.83 3.66C15.37 2.75 14.17 2 13.15 2H10.86C9.83005 2 8.63005 2.75 8.17005 3.66L7.45005 5.11C7.17005 5.65 6.61005 6 6.00005 6C3.83005 6 2.11005 7.83 2.25005 9.99L2.77005 18.25C2.89005 20.31 4.00005 22 6.76005 22Z"></path><path d="M10.5 8H13.5"></path><path d="M12 18C13.79 18 15.25 16.54 15.25 14.75C15.25 12.96 13.79 11.5 12 11.5C10.21 11.5 8.75 12.96 8.75 14.75C8.75 16.54 10.21 18 12 18Z"></path></svg>
        <!--[ Title ]-->
        <span itemprop="name">Photography</span>
      </a>
    </li>
    <!--[ Sub Menu (2.2) ]-->
    <li>
      <a aria-label="Game" href="#" itemprop="url">
        <!--[ Icon ]-->
        <svg class="line" viewBox="0 0 24 24"><path d="M9.57002 12.46L6.52002 15.51" stroke-miterlimit="10"></path><path d="M6.55005 12.49L9.60005 15.54" stroke-miterlimit="10"></path><path d="M13.53 14H13.54" stroke-miterlimit="10"></path><path d="M17.47 14H17.48" stroke-miterlimit="10"></path><path d="M15.5 15.98V15.96" stroke-miterlimit="10"></path><path d="M15.5 12.04V12.02" stroke-miterlimit="10"></path><path d="M9 22H15C20 22 22 20 22 15V13C22 8 20 6 15 6H9C4 6 2 8 2 13V15C2 20 4 22 9 22Z"></path><path d="M13.01 2L13 3.01C12.99 3.56 12.55 4 12 4H11.97C11.42 4 10.98 4.45 10.98 5C10.98 5.55 11.43 6 11.98 6H12.98"></path></svg>
        <!--[ Title ]-->
        <span itemprop="name">Game</span>
      </a>
    </li>
  </ul>
</li>

<!--[ Standard menu (3) ]-->
<li>
  <a aria-label="About" href="https://example.com/p/about.html" itemprop="url">
    <!--[ Icon ]-->
    <svg class="line" viewBox="0 0 24 24"><path d="M9.16006 10.87C9.06006 10.86 8.94006 10.86 8.83006 10.87C6.45006 10.79 4.56006 8.84 4.56006 6.44C4.56006 3.99 6.54006 2 9.00006 2C11.4501 2 13.4401 3.99 13.4401 6.44C13.4301 8.84 11.5401 10.79 9.16006 10.87Z"></path><path d="M16.41 4C18.35 4 19.91 5.57 19.91 7.5C19.91 9.39 18.41 10.93 16.54 11C16.46 10.99 16.37 10.99 16.28 11"></path><path d="M4.15997 14.56C1.73997 16.18 1.73997 18.82 4.15997 20.43C6.90997 22.27 11.42 22.27 14.17 20.43C16.59 18.81 16.59 16.17 14.17 14.56C11.43 12.73 6.91997 12.73 4.15997 14.56Z"></path><path d="M18.3401 20C19.0601 19.85 19.7401 19.56 20.3001 19.13C21.8601 17.96 21.8601 16.03 20.3001 14.86C19.7501 14.44 19.0801 14.16 18.3701 14"></path></svg>
    <!--[ Title ]-->
    <span itemprop="name">About</span>
  </a>
</li>

<!--[ Standard menu (4) ]-->
<li>
  <a aria-label="Contact" href="https://example.com/p/contact.html" itemprop="url">
    <!--[ Icon ]-->
    <svg class="line" viewBox="0 0 24 24"><path d="M12 20.5H7C4 20.5 2 19 2 15.5V8.5C2 5 4 3.5 7 3.5H17C20 3.5 22 5 22 8.5V11.5" stroke-miterlimit="10"></path><path d="M17 9L13.87 11.5C12.84 12.32 11.15 12.32 10.12 11.5L7 9" stroke-miterlimit="10"></path><path d="M19.21 14.77L15.6701 18.31C15.5301 18.45 15.4 18.71 15.37 18.9L15.18 20.25C15.11 20.74 15.45 21.0801 15.94 21.0101L17.29 20.82C17.48 20.79 17.75 20.66 17.88 20.52L21.4201 16.9801C22.0301 16.3701 22.3201 15.6601 21.4201 14.7601C20.5301 13.8701 19.82 14.16 19.21 14.77Z" stroke-miterlimit="10"></path><path d="M18.7001 15.28C19.0001 16.36 19.8401 17.2 20.9201 17.5" stroke-miterlimit="10"></path></svg>
    <!--[ Title ]-->
    <span itemprop="name">Contact</span>
  </a>
</li>

<!--[ Dropdown Menu (5) ]-->
<li class="br">
  <input id="nav-menu-5-state" type="checkbox"/>
  <label for="nav-menu-5-state" role="button" aria-label="Legal">
    <!--[ Icon ]-->
    <svg class="line" viewBox="0 0 24 24"><path d="M21 7V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V7C3 4 4.5 2 8 2H16C19.5 2 21 4 21 7Z" stroke-miterlimit="10"></path><path d="M14.5 4.5V6.5C14.5 7.6 15.4 8.5 16.5 8.5H18.5" stroke-miterlimit="10"></path><path d="M8 13H12" stroke-miterlimit="10"></path><path d="M8 17H16" stroke-miterlimit="10"></path></svg>
    <!--[ Title ]-->
    <span itemprop="name">Legal</span>
  </label>
  <ul>
    <!--[ Sub Menu (5.1) ]-->
    <li>
      <a aria-label="Privacy Policy" href="#" itemprop="url">
        <!--[ Title ]-->
        <span itemprop="name">Privacy Policy</span>
      </a>
    </li>
  </ul>
</li>

<!--[ Standard menu (6) ]-->
<li>
  <a aria-label="Sitemap" href="#" itemprop="url">
    <!--[ Icon ]-->
    <svg class="line" viewBox="0 0 24 24"><path d="M20 14C21.1046 14 22 13.1046 22 12C22 10.8954 21.1046 10 20 10C18.8954 10 18 10.8954 18 12C18 13.1046 18.8954 14 20 14Z"></path><path d="M20 6C21.1046 6 22 5.10457 22 4C22 2.89543 21.1046 2 20 2C18.8954 2 18 2.89543 18 4C18 5.10457 18.8954 6 20 6Z"></path><path d="M20 22C21.1046 22 22 21.1046 22 20C22 18.8954 21.1046 18 20 18C18.8954 18 18 18.8954 18 20C18 21.1046 18.8954 22 20 22Z"></path><path d="M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z"></path><path d="M6 12H18"></path><path d="M18 4H14C12 4 11 5 11 7V17C11 19 12 20 14 20H18"></path></svg>
    <!--[ Title ]-->
    <span itemprop="name">Sitemap</span>
  </a>
</li>

[
  {
    "name": "Blog",
    "icon": "<svg class=\"line\" viewBox=\"0 0 24 24\"><path d=\"M22 11V17C22 21 21 22 17 22H7C3 22 2 21 2 17V7C2 3 3 2 7 2H8.5C10 2 10.33 2.44 10.9 3.2L12.4 5.2C12.78 5.7 13 6 14 6H17C21 6 22 7 22 11Z\" stroke-miterlimit=\"10\"></path><path d=\"M8 2H17C19 2 20 3 20 5V6.38\" stroke-miterlimit=\"10\"></path></svg>",
    "link": "https://example.com/search/label/Blog"
  },
  {
    "name": "Categories",
    "icon": "<svg class=\"line\" viewBox=\"0 0 24 24\"><path d=\"M4.21995 3.09998H15.6599C16.3399 3.09998 17.19 3.56998 17.55 4.14998L21.73 10.83C22.13 11.48 22.09 12.5 21.63 13.11L16.45 20.01C16.08 20.5 15.28 20.9 14.67 20.9H4.21995C2.46995 20.9 1.40999 18.98 2.32999 17.49L5.09995 13.06C5.46995 12.47 5.46995 11.51 5.09995 10.92L2.32999 6.48998C1.40999 5.01998 2.47995 3.09998 4.21995 3.09998Z\" stroke-miterlimit=\"10\"></path></svg>",
    "items": [
      {
        "name": "Photography",
        "link": "#",
        "icon": "<svg class=\"line\" viewBox=\"0 0 24 24\"><path d=\"M6.76005 22H17.24C20 22 21.1 20.31 21.23 18.25L21.75 9.99C21.89 7.83 20.17 6 18 6C17.39 6 16.83 5.65 16.55 5.11L15.83 3.66C15.37 2.75 14.17 2 13.15 2H10.86C9.83005 2 8.63005 2.75 8.17005 3.66L7.45005 5.11C7.17005 5.65 6.61005 6 6.00005 6C3.83005 6 2.11005 7.83 2.25005 9.99L2.77005 18.25C2.89005 20.31 4.00005 22 6.76005 22Z\"></path><path d=\"M10.5 8H13.5\"></path><path d=\"M12 18C13.79 18 15.25 16.54 15.25 14.75C15.25 12.96 13.79 11.5 12 11.5C10.21 11.5 8.75 12.96 8.75 14.75C8.75 16.54 10.21 18 12 18Z\"></path></svg>"
      },
      {
        "name": "Game",
        "link": "#",
        "icon": "<svg class=\"line\" viewBox=\"0 0 24 24\"><path d=\"M9.57002 12.46L6.52002 15.51\" stroke-miterlimit=\"10\"></path><path d=\"M6.55005 12.49L9.60005 15.54\" stroke-miterlimit=\"10\"></path><path d=\"M13.53 14H13.54\" stroke-miterlimit=\"10\"></path><path d=\"M17.47 14H17.48\" stroke-miterlimit=\"10\"></path><path d=\"M15.5 15.98V15.96\" stroke-miterlimit=\"10\"></path><path d=\"M15.5 12.04V12.02\" stroke-miterlimit=\"10\"></path><path d=\"M9 22H15C20 22 22 20 22 15V13C22 8 20 6 15 6H9C4 6 2 8 2 13V15C2 20 4 22 9 22Z\"></path><path d=\"M13.01 2L13 3.01C12.99 3.56 12.55 4 12 4H11.97C11.42 4 10.98 4.45 10.98 5C10.98 5.55 11.43 6 11.98 6H12.98\"></path></svg>"
      }
    ],
    "open": true,
    "break": true
  },
  {
    "name": "About",
    "icon": "<svg class=\"line\" viewBox=\"0 0 24 24\"><path d=\"M9.16006 10.87C9.06006 10.86 8.94006 10.86 8.83006 10.87C6.45006 10.79 4.56006 8.84 4.56006 6.44C4.56006 3.99 6.54006 2 9.00006 2C11.4501 2 13.4401 3.99 13.4401 6.44C13.4301 8.84 11.5401 10.79 9.16006 10.87Z\"></path><path d=\"M16.41 4C18.35 4 19.91 5.57 19.91 7.5C19.91 9.39 18.41 10.93 16.54 11C16.46 10.99 16.37 10.99 16.28 11\"></path><path d=\"M4.15997 14.56C1.73997 16.18 1.73997 18.82 4.15997 20.43C6.90997 22.27 11.42 22.27 14.17 20.43C16.59 18.81 16.59 16.17 14.17 14.56C11.43 12.73 6.91997 12.73 4.15997 14.56Z\"></path><path d=\"M18.3401 20C19.0601 19.85 19.7401 19.56 20.3001 19.13C21.8601 17.96 21.8601 16.03 20.3001 14.86C19.7501 14.44 19.0801 14.16 18.3701 14\"></path></svg>",
    "link": "https://example.com/p/about.html"
  },
  {
    "name": "Contact",
    "icon": "<svg class=\"line\" viewBox=\"0 0 24 24\"><path d=\"M12 20.5H7C4 20.5 2 19 2 15.5V8.5C2 5 4 3.5 7 3.5H17C20 3.5 22 5 22 8.5V11.5\" stroke-miterlimit=\"10\"></path><path d=\"M17 9L13.87 11.5C12.84 12.32 11.15 12.32 10.12 11.5L7 9\" stroke-miterlimit=\"10\"></path><path d=\"M19.21 14.77L15.6701 18.31C15.5301 18.45 15.4 18.71 15.37 18.9L15.18 20.25C15.11 20.74 15.45 21.0801 15.94 21.0101L17.29 20.82C17.48 20.79 17.75 20.66 17.88 20.52L21.4201 16.9801C22.0301 16.3701 22.3201 15.6601 21.4201 14.7601C20.5301 13.8701 19.82 14.16 19.21 14.77Z\" stroke-miterlimit=\"10\"></path><path d=\"M18.7001 15.28C19.0001 16.36 19.8401 17.2 20.9201 17.5\" stroke-miterlimit=\"10\"></path></svg>",
    "link": "https://example.com/p/contact.html"
  },
  {
    "name": "Legal",
    "icon": "<svg class=\"line\" viewBox=\"0 0 24 24\"><path d=\"M21 7V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V7C3 4 4.5 2 8 2H16C19.5 2 21 4 21 7Z\" stroke-miterlimit=\"10\"></path><path d=\"M14.5 4.5V6.5C14.5 7.6 15.4 8.5 16.5 8.5H18.5\" stroke-miterlimit=\"10\"></path><path d=\"M8 13H12\" stroke-miterlimit=\"10\"></path><path d=\"M8 17H16\" stroke-miterlimit=\"10\"></path></svg>",
    "items": [
      {
        "name": "Privacy Policy",
        "link": "#"
      }
    ],
    "break": true
  },
  {
    "name": "Sitemap",
    "icon": "<svg class=\"line\" viewBox=\"0 0 24 24\"><path d=\"M20 14C21.1046 14 22 13.1046 22 12C22 10.8954 21.1046 10 20 10C18.8954 10 18 10.8954 18 12C18 13.1046 18.8954 14 20 14Z\"></path><path d=\"M20 6C21.1046 6 22 5.10457 22 4C22 2.89543 21.1046 2 20 2C18.8954 2 18 2.89543 18 4C18 5.10457 18.8954 6 20 6Z\"></path><path d=\"M20 22C21.1046 22 22 21.1046 22 20C22 18.8954 21.1046 18 20 18C18.8954 18 18 18.8954 18 20C18 21.1046 18.8954 22 20 22Z\"></path><path d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"></path><path d=\"M6 12H18\"></path><path d=\"M18 4H14C12 4 11 5 11 7V17C11 19 12 20 14 20H18\"></path></svg>",
    "link": "#"
  }
]