Adding Multi-level Dropdown Menu to Squarespace

[tuanphan]

To add Multi-level dropdown menu to Squarespace like this

#1. Install Code

#1.1. First, you can add a Dropdown Menu, something like this

#1.2. Next, hover on dropdown > Click Gear icon

See URL Slug. We will have /sm-pages

#1.3. Use this code to Code Injection > Footer

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<script>
window.MultiLevelDropdownConfig = {
  enabled: true,
  matchBy: "text",
  dropdowns: [
    {
      folderId: "/sm-pages",
      submenuDirection: "right",
      matchBy: "text",
      parents: [
        "Item 01",
        "Item 10",
        "Item 20",
        "Item 30"
      ]
    }
  ]
};
</script>
<script src="https://code.beaverhero.com/header/0626c25v1multileveldropdown.js"></script>

#1.4. Update options in Line 06 to Line 18 (explain below)

dropdowns: [
  {
    folderId: "/sm-pages",
    submenuDirection: "right",
    matchBy: "text",
    parents: [
      "Item 01",
      "Item 10",
      "Item 20",
      "Item 30"
    ]
  }
]

This option means

• change Item 01, Item 10, Item 20, Item 30 to main level and items under them to second level
• Line 08: /sm-pages is URLSlug in step #1.2

• like this

#1.5. In case you want to add 2 Multi-Level Dropdown Menus, for example this dropdown

We will have code like this

• Note: /reuse-pages-1 is URL Slug of this dropdown menu

dropdowns: [
  {
    folderId: "/sm-pages",
    submenuDirection: "right",
    matchBy: "text",
    parents: [
      "Item 01",
      "Item 10",
      "Item 20",
      "Item 30"
    ]
  },
  {
    folderId: "/reuse-pages-1",
    submenuDirection: "right",
    matchBy: "text",
    parents: [
      "Gallery Form",
      "Custom Menu"
    ]
  }
]

#2. Customize

#2.1. To remove shadow around second level menu, use this code to Custom CSS

div.mld-submenu {
    box-shadow: none !important;
}

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Site Footer

Choose Markdown

Add this code into Markdown

<script>
window.MultiLevelDropdownConfig = {
  enabled: true,
  matchBy: "text",
  dropdowns: [
    {
      folderId: "/sm-pages",
      submenuDirection: "right",
      matchBy: "text",
      parents: [
        "Item 01",
        "Item 10",
        "Item 20",
        "Item 30"
      ]
    }
  ]
};
</script>
<script src="https://code.beaverhero.com/header/0626c25v1multileveldropdown.js"></script>