How drop-down navigation menus display on your site.

You can create a drop-down menu on any site using our dropdown feature. How the dropdown displays depends on your site's version and template.

Computer display

On most sites, the dropdown's links appear when you hover over the dropdown. In some templates, the menu of links only appears when you click the dropdown.

Some dropdowns include an icon next to the dropdown name to encourage visitors to view the menu.

Dropdown navigation

These template families have notable dropdown styles that add an extra layer of navigation:

• Adirondack - Dropdown links create a navigation bar.
• Bedford - Dropdowns create sidebar navigation on layout pages.
• Brine - Dropdowns in the footer don't display as drop-down menus, but as columns.

Mobile display

Except as noted below, dropdown menus collapse on mobile and expand when tapped. Some dropdowns include an icon next to the dropdown name to encourage visitors to open the menu.

Clicking the dropdown

On version 7.1 sites, clicking the dropdown title causes its menu of links to expand.

In the following template families on version 7.0, clicking the dropdown title opens the first page in the dropdown:

• Bedford - Computer view
• Brine - Computer view
• Farro - Computer view
• Flatiron - Computer view
• Momentum - Mobile view
• Pacific - Computer view
• Wells - Mobile view

To test this behavior, open the public version of your site in an incognito window before clicking the dropdown title. Clicking the dropdown while logged in may not work correctly if the first item in your dropdown is a link to an external site or uploaded file.

Tip: You can make a dropdown title link to a page by adding custom code. To learn more, visit this post in the Squarespace Forum.

Keep in mind, custom code modifications fall outside the scope of our support. This means we’re unable to help you set up or troubleshoot code-based solutions.

Menu background color

Many sites display a background color behind the dropdown links. In most sites, this color matches another element on your site, such as the header background or site background.

Use the list below to find style tweaks for the dropdown background color on your site. Keep in mind that these tweaks may adjust other elements on your site. For more information on version 7.0 templates, visit your template's guides.