Knowledge Base

Builder brands: How to create drop-down menus

Drop-down menus, also known as sub-navigation, are easy to sort and organize different pages into tabs in your main navigation bar. Maybe you have seen this functionality on a site before, or perhaps you have too many pages to fit in an organized fashion within your standard navigation; either way, drop-downs are simple to add and have multiple uses.

Review the steps below to find out how to add a drop-down menu. If you need help creating pages, check out Working with pages.

Adding a drop-down menu

  1. Launch your website editor and select Pages from the left-hand menu.

    select Pages
     
  2. In the Pages menu, find the page that you want to be in the menu bar first.

    find the page that you want to be in the menu bar first
     
  3. Drag or slide the next page slightly to the right, and under the page you want it nested under by clicking and holding it.

    Drag or slide the next page slightly to the right and under the page you want it nested under by clicking and holding
     
  4. Then move each page one by one. You will see the pages begin to disappear from the regular site navigation. The pages you slide beneath the first will now be in a drop-down menu when you preview your webpage.

    The pages you slide beneath the first will now be in a drop-down menu when you preview your webpage
     
  5. And that's it!
     
    Pro tip: Be sure that all pages beneath your first in the drop-down sequence "line up"; otherwise, they will create a series of submenus and drop-downs. You can always preview your work from the editor without publishing.
    drop-down sequence are lined up

    drop-down sequence are not lined up

 

How to alter your drop-down menu

  1. Click on your Site Navigation from the main design editor.

    Click on your Site Navigation
     
  2. In the toolbar that appears, select More on the far right, then choose Advanced.

    In the toolbar that appears, select More on the far right then choose Advanced
     
  3. From the Advanced Menu, select Drop Down Settings.

    From the Advanced Menu, select Drop Down Settings
     
  4. You can now use this section to change the color, text, and other areas of the drop-down menu.

    You can now use this section to change the color, text, and other areas of the drop-down menu
     
  5. Be sure to Save and Publish your changes to make them live.

    Be sure to Save and Publish