Dropdown display by template

false

Dropdown display by template

Last updated January 22, 2026 20:12

How dropdown navigation menus display on your site.

You can create a dropdown 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.
Template family Expands on... Icon Notes
7.1 sites Hover None Links align left when the navigation is aligned left or center in the header. Links align right when the navigation is aligned right.
Adirondack Hover + Links appear in a navigation bar between the main navigation and page content.
Avenue Hover None
Aviator Click +
Bedford Hover None The dropdown and its links create a sidebar navigation on the left side of layout pages.
Brine Hover None Dropdowns don't display as dropdown menus in the footer. If you choose Layout: Columns in site styles, each dropdown in the footer creates its own column.
Farro Hover None
Five Hover None
Flatiron Hover None
Forte Hover +
Galapagos Hover +
Ishimoto Hover None
Momentum Hover None
Montauk Hover None
Native Hover None
Pacific Hover +
Skye Click +
Supply Click None In site styles, choose Folder Links: Collapsible or Always Show.
Tremont Click None
Wells Click None Displays expanded by default when viewing a page within the dropdown.
Wexley Hover +
York Hover ˇ

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 dropdown 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.
Template family Icon Notes
7.1 sites > Opens in an overlay. Tap Back to return main navigation.
Adirondack +
Avenue +
Aviator +
Bedford +
Brine » Opens in a new overlay. While viewing a page in the dropdown, the menu stays expanded in the navigation
Farro » Opens in a new overlay While viewing a page in the dropdown, the menu stays expanded in the navigation
Five +
Flatiron +
Forte + While viewing a page in the dropdown, the menu stays expanded in the navigation
Galapagos +
Ishimoto +
Momentum None Always expanded
Montauk +
Native None Always expanded, within a special mobile navigation
Pacific +
Skye +
Supply None Always expanded
Tremont None
Wells None Always expanded. The dropdown title has line under it.
Wexley +
York ˇ While viewing a page in the dropdown, the menu stays expanded in the navigation

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.

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.
Template family Tweaks
7.1 sites - Section Backgroundin the Sitewide section of the selected color theme.
Adirondack - Background Colorin the Site Header section
Avenue - Site Background
Aviator - Folder Dropdown Background
Bedford - Header dropdowns: Header Background Color - Footer dropdowns: Footer Background
Brine - Header dropdowns: Folder Color - Footer dropdowns: Background Color in the Footer section
Farro - Header dropdowns: Folder Color - Footer dropdowns: Background Color
Five - Navigation Background
Flatiron - Header/Footer Background Color
Forte - Auto-selects the color based on background color or image
Galapagos - Header dropdowns: Background Color. Dropdown links follow Nav Link Color - Footer dropdowns: Nav Link Color. Dropdown links follow Background Color.
Ishimoto - Site Background
Momentum - Navigation Background
Montauk - Canvas Background
Native - Site Background
Pacific - Background Color
Skye - Site Background
Supply - Header Color
Tremont - Always transparent
Wells - Site Background
Wexley - Site Background
York - Site Background

Was this article helpful?

Yes No

19 out of 75 found this helpful

Yes No

Dropdown display by template