Ask a Question ?
Design & Publish Websites Faster

How to Set a Dropdown Navigation Menu

About the Navigation App

In this article, you will learn about the new Navigation app. It has several improvements from the old nav app, including the capability to add, as its name implies, a dropdown navigation menu of options to each of your top (parent’s) link.

Differences With the Old One

The old navigation app used to select one style per item, and you could have several styles (like link colors) on the same app.

Inconsistent colors for each link on the old nav app

The old navigation app let you have different colors for each item

This is obviously something uncommon and not expected on a navigation menu.

With the new Navigation app, all the item’s style get updated at the same time.

Dropdown navigation styles for all the items

Shared style for the nav items, changing it updates them all

Also, with the old app you could leave some words out of the actual link. Now it is managed all from a CMS panel that will prevent this error.

CMS panel for editing links

The CMS panel allows you to edit all links of the multilevel navigation app

Let’s get started on how to use it.

How to Set Up the Multi-level Navigation App

Install

Login to your site and go to the app store. Click and drag the “Install New” button on the right side of the Navigation app category to your layout.

Drag the install button to your layout

Open the app store and drag the “Install New” button to one of your columns

Once you release it, your app will load and will look like the following image.

This is the default look of a dropdown menu app

When you first install it, the Navigation app will look like this

Modify Default Items

Once you have it installed, the first thing you’ll want to do is add your own items. To do so, click on the pencil icon on the app toolbar, labeled “Edit Content”.

"Edit Content" button

Clicking on the pencil icon (Edit Content) opens the CMS panel

This will open the CMS panel.

CMS panel for the dropdown navigation app

The CMS panel lets you easily edit your nav items

Notice that highlighted tab on the left reads “Manage Top Level Links”. This refers to the top level of your links (the ones that are visible without hovering over). If you go to the “Manage Sub Level Links” tab, you will see the sub-menu items.

To edit an item, click on the “Edit” link of any of them. This will open a screen that will look like the following.

Edit each "top" link item on this window

Here you can set the link title, and URL

There you can edit the “Link Title”, which will be displayed as the actual text of the link (for example: Home). You can also set the destination URL to where you want your visitor to be taken when he clicks. This can either be one of your existing pages, or a custom URL.

You can also choose them to open on the same or new window of your visitor’s browser.

Add Items

To add a top level item, click on the “New Top Level Link” tab on the left. This will add a top link to your navigation menu. The window is the exact same of the “New Sub Level Link” item, but without the “Parent Link” option. We’ll talk about the second one below.

To add a sub-item, click on the “New Sub Level Link” tab on the left. Notice it doesn’t include the word “Navigation”.

New Link

The “New Sub Level Link” will let you add more items to your nav app

You must select a “Parent Link”. The item you are creating will be shown on the sub-level navigation of the link you selected.

Reorder Items

You have two places to edit the order of the links of your dropdown navigation. This affects the display position of each item.

First, you have the “Manage Top Level Links” tab (the one at the top of the list of this CMS panel). The second one is the “Manage Sub Level Links” tab, which edits the items of the sub-menu. But both panels behave the same way.

They would look like the following image.

CMS panel for "Managing Links"

In this window you can drag any of the items to change its position

To change the position of an item, drag and drop it above or below any of current items. Release when you’re done positioning it, and click “Close” on the top right.

Style of Top Items

To change the style (color, typography, font size, etc.) of the top items, you must hover over the first item of your Navigation app, and select the style dot on the further right. See the image below for reference.

Style dot for the top link items

The style dot may be a bit difficult to reach if you don’t hover the proper place (the actual first link item)

Once you click this dot, the “edit in place toolbar” will open, with formatting options for your text.

Formatting options for all the text links of your navigation app

Changing one of these options will update all the items on your nav app

If you click on the color, you’ll get two different options. “Default Color”, for the “normal state” and “Rollover Color”, for hovering purposes.

Set colors for the "default" state, and the "hovering-over" state

You can select both, “Default” and “Rollover” colors for your links

You’ll notice that whenever you change any of these colors, the sub-menu items are also affected. It may be something desired, but if not, keep on reading to learn how to prevent it.

Style of Dropdown Items

If you want to edit the styling of the sub-menu items, hover over one (the fist) item of the sub menu of the first top-level link and click on its dot.

Style dot for the sub-menu items

Style dot for the sub-menu items

Note that it must be the first the top (parent) link for the dot to appear on the submenu.

It will show the same edit-in-place toolbar, you’ll get the same options. But these will only affect the items of the dropdown.

Edit-in-place toolbar with styling options for your items

These options will not affect the top level items

FAQ

Can I still use the old navigation app?

If you are currently using it (existing user) you will still be able to use the old nav app. New sites are not getting the old version though.

We recommend using the new version, it’s better in several ways.

Why does the color of the top items change the sub items?

This is the normal/expected behavior. If you want to only edit only the color of the dropdown items, click on the style dot of the first sub-menu. Refer to the steps above (Style of Dropdown Items).

Menu