How to add a navigation dropdown menu to Renaissance

Renaissance Renaissance Guide
#1

Following up on the topic of adding a top-level nav item, we also often get asked “How do I add a dropdown menu to my website’s navigation?”.

Adding a dropdown menu is a really easy task:

Start by logging into the backend, click on the primary search button (top right).
In the search menu, type site-navigation and select the matching search result.

On the navigation snippet page, scroll through the snippet markup looking for where you want to add the dropdown menu. Next, paste the following code where you want the dropdown menu to be displayed.

Click Here for Dropdown Menu Code 
<li class="-has-dropdown">
        <button type="button" aria-expanded="false" aria-controls="nav_dropdown_id_0">
              TOP LEVEL NAV TITLE
                    <svg width="8" height="8" viewBox="0 0 32 32" class="icon">
                          <title>Dropdown arrow</title>
                          <polygon points="16,25.9 0,9.9 3.7,6.1 16,18.4 28.3,6.1 32,9.9"></polygon>
                    </svg>
        </button>
              <ul class="dropdown dropdown__two-column" id="nav_dropdown_id_0" aria-hidden="true">
                    <li>
                          <a href="/link-url.php">PRIMARY LINK TITLE</a>
                    </li>                        
                     <li>
                          <a href="/link-url.php">DROPDOWN LINK TITLE</a>
                    </li>
                    <li>
                          <a href="/link-url.php">DROPDOWN LINK TITLE</a>
                    </li>
              </ul>
  </li>

Once pasted you will first change the Top-Level Nav Title.
Then you will edit the Primary Link, changing the link URL and title.
Next, you will edit the Dropdown Links, changing the link URLs and titles.
Select the save button.

Now you have a new dropdown menu in the site navigation.

Without changing these fields the dropdown menu should look like the following.
nav-dropdown

#2

Here is the video guide on How To Add A Navigation Dropdown to Renaissance

#3

Thanks Travis!

Wondering if you could share whether Ren can do a tiered drop down nav menu out of the box?

Example
Buyers (main nav heading) > Condominiums (What you have here) > List of pages for Condominiums (Tiered portion) where you could mirror the side nav for a page.

#4

There is only “Main” and “Sub” in the top navigation (there isn’t a third level)

1 Like
#5

Thanks for the clarity my man! We’ll add it to our custom work list :cowboy_hat_face:

#6

Sounds good! Do you have a retainer booked? We have a tonne of orders right now, so you’ll want to get in as soon as possible. Let me know if you need any help getting a project setup.

#7

On my live site I have five sections on the dropdown. What could would I use to do the same on my dev site.

    I changed the two to five, but it didn’t work. lol

#8

Are you talking about this? Pretty sure it only does 2 (That’s the default, is that right @rchohan ?

Screen Shot 2021-03-04 at 11.22.23 PM
Screen Shot 2021-03-04 at 11.22.23 PM1290×698 190 KB

I customized mine (paid REW person to do it) to have 3. 5 seems like a lot.

Screen Shot 2021-03-04 at 11.23.25 PM
Screen Shot 2021-03-04 at 11.23.25 PM2880×1646 745 KB

Three Tiered Menu
#9

@AmyPye I do think we should accommodate at least 3 though by default (not sure if 5 would even be possible in this design) thoughts?

1 Like
#10

@Morgan I think three is great but I’d probably say that’s the max. I think more than that is going to be overkill and could cause some issues.

#11

Makes sense. I’ll add the three rows.

Thanks

#12

Hey Morgan,
Yes we support the dropdown menu to have up to 3 columns. We didn’t implement it beyond that because it would be hard to control when making it responsive. Hope that answers the question.

1 Like
#13

Great, thanks Rachna, don’t want to mess with responsive, let’s stay at 3. Richard seems good with that :slight_smile:

2 Likes
#14

Could you kindly share what the HTML code would look like if we were to have 3 column?

#15

OR tell me how to make the columns be a little wider. Some area names are wider than the column allows for and it goes over the midline. :slight_smile:

#16

Thanks for the tutorials, Travis and Elianna. Just wondering if it’s possible to have a multi-column dropdown without including a primary link title? In other words, the dropdown would only include the columns.

Three Tiered Menu