How to make a multi-level top nav dropdown menu

In NationBuilder's public themes, the top nav dropdown menus are, by default, one level deep. This how-to outlines the components needed to create a top nav dropdown that's two levels deep.

The navigation structure can be found in the _nav.html partial template in your custom theme's Templates section. In Aware, _nav.html contains the following nav structure:

Note the unordered list with the "sub" class – this is the first (and only) dropdown level. Via liquid, the "sub" element shows the parent element if the "show parent" option is turned on in the control panel, and also loops through and outputs its children via the "nav_children" attribute. We'll be using the "nav_children" attribute again to print the second dropdown level:

Within the "sub" dropdown menu, we've now added a "subsub" element to the links in this dropdown that contain at least one "nav_children". This block loops through and outputs the links of the children pages of the first dropdown's links (in other words, the "nav_children" of the "nav_children"). Parent links that contain children also have a "drop" class added to them.

So, we now have the contents of the second level dropdowns, but we still need to style these menus and hide them until their parents are hovered over. Dropdowns should default to the hidden state, and since we know that parents containing children also have a "drop" class, we can design our stylesheet to show the children of a link with the "drop" class when it's hovered over. The following snippet, when placed in your tablet-and-desktop.scss stylesheet, will style these dropdowns for the Aware theme:

Multi-level dropdown screenshot

Do you like this page?

If you’re unclear on how this feature works, please ask a question. If you would like to see changes to this feature, please submit a suggestion.