Adding drop-down menus to your navigation with folders

Create lists of navigation links that appear when visitors hover over the folder name.

Use folders to create drop-down navigation menus (also known as nested pages or sub-menus) on your site.

Each folder creates a single drop-down menu in your navigation. You can have multiple folders for different drop-down menus, but it's not possible to nest folders within other folders.

Watch a video

Add a folder

To add a folder:

1. Open the Pages panel and click the + icon.
2. Click Folder.
3. The empty folder will appear in the pages panel. Enter a name for the folder to display in the navigation.

Add pages to the folder

Folders aren't pages and it's not possible to add content directly to them. Instead, when you add pages to a folder, they appear as drop-down menu items.

To add an existing page to the folder, drag and drop it into the space below the folder. To add a new page to the folder, click Add Page below the folder. To change the order of the pages, drag and drop them within the folder.

It's not possible to nest folders within folders.

Folder URL

If you navigate directly to a folder's URL, it redirects to the first page in the folder. If the folder doesn't have any pages, you'll see "This folder does not contain any pages." It's not possible to change this text or add other content.

Index pages (version 7.0)

You can add any type of page to a folder except an index page. To direct visitors to an index page, choose Link, click Click to add URL, and use the Content tab to point the link to your index page. For more information about configuring links, visit Adding links to your site.

Folder display

How your folder displays depends on your site's version.

On version 7.1 sites:

• The folder's pages appear when you hover over the folder name.
• Clicking the folder title doesn't open the first page.
• The folder is collapsed on mobile and opens when tapped.

For version 7.0-specific information, see Folder display by template.

Background color

On version 7.1 sites, your folder background color depends on your header style:

• Solid or Gradient - Background color follows the Background color tweak in your header settings. To change this, click Edit Header, click Style, then click Background color.
• Theme - Background color follows the site-wide Section Background tweak for the theme you select for the header. To change this, click Edit Header, click a theme, then click the pencil icon on the theme.
• Dynamic - Background color follows the site-wide Section Background tweak for the theme of the first section on the page. To change this, open site styles, click Colors, then hover over the theme the section uses and click the pencil icon.

For a list of the version 7.0 tweaks that set this color, see Folder display by template.

Delete the folder

If you delete a folder, its pages will also be deleted.

To delete a folder:

Tip: You can restore the pages within 30 days.

Product category nested menus (version 7.1)

Product categories create a separate navigation at the top of your store.

On store pages in version 7.1, you can create nested subcategory menus. To learn more, visit Organizing products.

Store pages in version 7.0 have a category navigation, but it's not possible to display nested subcategories.