How to Create a Dropdown Menu

For users who are looking to build complex websites with a lot more pages - adding dropdown menus to your site's navigation is a way to customize and organize your content.

 

 

 

Here is what the dropdown menu looks like: 

dropdown-menu-site-example

After setting up a drop menu, you'll see that the dropdown title will have an arrow indicator. When your visitors hover over the dropdown title, a menu containing either links to pages on your site or links to external sites will expand. 

Please note that visitors will not be able to click on the dropdown title itself, only the items in the expanded menu.

Step 1: Enabling the Dropdown Menu 

The dropdown menu option is only available to multi-page sites. You can enable the multiple-page functionality in your site's Settings panel  - see our guide to creating a multi-page site here

Under your page manager, open the "ADVANCED>" option and click the [Add Dropdown Menu] button.

You'll see that a new dropdown item has been added - you can add up to 10 dropdown menus in one site. 

 

Step 2: Name and Reposition the Dropdown Menu

Now, rename the dropdown and drag the menu to the right order in the navigation menu. Please note that you will not be able to replace the homepage with a dropdown menu. The first item in the navigation menu must be a page (and not a dropdown menu or external link). 

Step 3: Add Items to the Dropdown Menu

You can add up to 15 items (either pages or external links) to a single dropdown menu by dragging and dropping the pages or external links under the menu. 

Creating a Dropdown Menu for Sections

If you want to create a dropdown menu that links to the sections of a page (rather than individual pages), use the external link functionality. Start off with a new dropdown menu.

Add the link to the section by adding a new external link. For example, to create a dropdown item that links to the second section of this page http://sunnysideup.strikingly.com/photos, click [Add New link] under EXTERNAL LINKS and put the URL or select the page and section you want to link to. 

Sunnysideup__.png

Next, move the external links to the dropdown menu. In this dropdown, "Nature" links to the first section of this page http://sunnysideup.strikingly.com/photos, and "Urban" links to the second section on the same page. 

Lastly, hide the original page that the sections are on by unchecking the "Show in navigation" option in the settings gear and publish your changes. 

After setting up the external links to sections in the dropdown menu, it will look like this:

 

Note: The dropdown *header* does not link to anything. (e.g. clicking the "Photos" in the example below will not link to any other pages.) If you need to link this header to another page, this is possible using some custom code in your site. Just send us a message via support@strikingly.com or chat and we can add the code on your site to make this happen.

Note: Currently, we only support dropdowns for the navigation bar. We do not support dropdowns for the footer.  

We hope you'll find this feature useful! Please let us know if you have any questions by emailing us at support@strikingly.com or chatting with us. We'd love to hear your feedback! 

 

 

Have more questions? Submit a request