One of the most important parts of a website is the navigation menu. The navigation menu is like the roadmap the user must follow in order to reach their destination. Make the journey any lengthier than necessary, and chances are the user will get tired and bounce. With good reason, it’s a no brainer that people like everything fast. Therefore, a good navigation must be organized and concise for optimal user experience.

One of Responsive Site Designer's greatest new features is the kickin' Components Library that's comprised of several pre-made components, ready to be added to your project. This includes numerous types of navigation menus, all freely customizable and at your disposal.

Components Library

You can choose to use a menu from the selection above, or if you're really crazy, create your own component from scratch (Learn more here). For those who have several links but don’t want to crowd up the navigation bar, you’re in luck. In this tutorial we will go over how to create nested menus, so that your website can look stylish and better organized!

 

Before we get started...

In this tutorial, we will be using the Foundation framework and its attributes to create responsive nested dropdowns. It is highly recommended that you have the documentation close at hand. Otherwise, it is more likely to get confusing! If there are more attributes you wish to add, use the doc so that you can learn about the attribute, follow along with the code and apply it to RSD. Good luck!

Create Your Navigation Bar

Begin with your slider to the left of the first breakpoint. Drag and drop a Container to your first column (or for the sake of semantics, use a Container Nav). Add a Text Link and a Font Icon Link, which can be found under the drop-down selector for Font Icon. The elements should at first appear stacked.

Adding Font Icon Link
Adding Image

To modify this current layout and place them inline, under the container’s Design pane, go to the Position section and change the Display to Flex. To have both elements at opposite ends, under Justify select Space Between. Now it’s starting to take better shape. Let’s modify the text link to make it more appealing. Give the text link a class name and add your styles. I increased the font size to 20px and under Flexbox, changed the alignment to Center. But you can style them however you want, more power to you!

Now they're inline!
Inline

We’re done with the navigation bar (for now). Next up is when the fun part begins. Time to add some menu links!

First select the column, then in the Elements pane, drop a second Container to the column. This will allow us to manipulate its contents without affecting the navigation bar. Give it a unique ID name (like sub-nav); we will use it later on. Add a List Container, this is the equivalent of the <ul> element in HTML, they have just been placed in their respective container. You can modify how many list (<li>) elements you want by going to the Design pane. To add your links, drag and drop Text Link into their respective section.

Adding Text Links
With text links

Attribute it Up!

Ultimately what we want is a navigation menu that works well on mobile and desktops. For mobile, an accordion-style menu is usually what works best. For higher resolutions, we can switch that over to a dropdown menu.

 

What the heck are attributes?

Most websites now use interactive elements to make their pages more interesting and not so...static. Examples like these include clicking on a button and having a menu slide down (which is what we will be doing today!). In general, attributes are there to give more information about a particular element. Event attributes allow elements to specify a script to be run during a specific event (i.e., during a ‘click’). Many of these scripts require communication with Javascript, something that can’t usually be done with RSD itself. Fortunately, both Foundation and Bootstrap have created their own respective Javascript attributes into their framework. The list of these can be found in RSD’s Attributes section. For more details on the kind of power each attribute holds, check out each framework’s documentation.

From here on, for better practice, we will begin following the code provided for us in Foundation’s docs.

Locate the List Container. An easier way to do this is by going on the Inspector pane and selecting it from there. Mouse over the element name to see it highlighted in the live preview. From there, you can see you have the <ul> element selected. Good! According to the code, that is the one we should start with!

Use the Inspector to check if it's in the correct order.
List container

Double click on the element to open up the Design pane. Give it the vertical medium-horizontal and menu classes. The vertical class will align the menu vertically, beginning on the smallest screen. The medium-horizontal class changes the orientation to horizontal once it reaches a medium size, or breakpoint. The menu class is there to turn it into a flexible component for navigation.

After applying the classes, drag your slider to the right and see how your menu changes!

Wow!
List container

It’s time to add a dash of fun to our navigation! Under Attributes, select Data Responsive Menu, and add the value accordion medium-dropdown. As a default, we would have an accordion menu. From medium screens and up, our menus would turn into a dropdown.

Adding attributes.
List container

With this, we have translated the first line of code into RSD! Let’s keep going!

Toggle

We’re not done with attributes yet. We still need to make it so that clicking on our hamburger icon triggers the script to allow the menu to appear, along with making the navigation bar disappear entirely on larger screens. To make this happen, select the container where your navigation bar is located and add the Data Responsive Toggle attribute. Afterward, select your hamburger element and give it the Data Toggle attribute. For both of the attributes, make the value equal to the ID you gave for the second container. To witness this transformation, preview it on your browser. So cool!

The Data Toggle attribute.
List container

We’re almost done! How about adding some nested links?

Nested Menu

Organization is important for optimal user experience. In order to prevent the user from clicking on a link and searching the entire page for the subject they want, you can categorize it under its appropriate link. We want to put a bit more info under ‘Services’. Select the link’s List Item Container and under Elements, drag and drop a List Container, along with however many Text Links you desire. Remember, you can make sure it’s in the correct order by opening the Inspect Pane and observing the corresponding HTML tags.

Use the code for reference.
Screenshot with code

Give your new List Container element the vertical and menu classes. They are now on par with the rest of the links, only nested. But what if we want to nest it one more time? No problemo, go back to the elements pane and drop a UL Link to your List Item Container. Make sure your <ul> elements have the vertical and menu classes!

It looks funky now - but see how it looks on the browser!
Nested menus

Check out the browser preview to see the magic come to life…..

Hooray!
Nested menu gif

...and there you have it! Feel free to tinker with your new menu in order to reach the end result you want.

If you want your site title to stay, one solution would be to split the column into two, replicate your title design, and use the Display: None feature to make it only appear at certain breakpoints. Change the span width of your original column to 12 when the title is hidden so that your menu can return to its starting position.

 

Note

There is a small issue that occurs whenever you try to customize an element that has a foundation attribute (our menu in this case). The style will appear and then when hovering over it will switch to Foundation's default colors (white and blue) When this happens, the solution would be to apply another class with the exact same styles to override the default.