CMS Development


Sidebar Menu with parent and child elements



I want to create a page with a sidebar menu. Creating the menu worked fine, but now I'm having trouble adjusting the settings for the advanced menu.


This is what I have so far:


As you can see, all the child elements are showing, which is really chaotic and makes the menu unbearably long.


I would like it to work this way:

The menu only shows the parent elements, so: Erste Hilfe, Augenspülungen, Pflaster, Verbandstoffe and Rettung+Medizintechnik. As soon as the user clicks on "Erste Hilfe" (for example), the parent "Erste Hilfe" will expand to show the child elements belonging to it. E.g. "Verbandkoffer, Branchenkoffer, etc."


What I've tried so far:

Okay, so I thought I could get this to work using the Advanced Menu settings in the Design Manager. But no matter if I choose "static menu", "dynamic by section" or "dynamic by page" - it keeps messing up.


Static Menu:



Dynamic by Section:



Dynamic by Page:



None of the above advanced menu settings is doing what I want it to do... Does anyone have an idea how I can get this to work?


Oh and maybe worth mentioning: We do have a normal menu on the top of the page - this sidebar menu would be used on our product pages provide a separate menu to navigate in between product categories.


Thanks in advance! 🙂

3 Replies 3

Sidebar Menu with parent and child elements

All the best Sonja!
Happy Coding!


Sidebar Menu with parent and child elements

Hi Venki,


thanks for the detailed reply!


I want the child elements to be displayed permanently when the user clicks on the parent element. Not as a dropdown, but more like an accordion element. Click on the parent element unfolds the child elements beneath. The problem with dropdown on hover or click ist that the child elements would cover the other menu elements and would disappear when the cursor ist moved or the user clicks elsewhere on the page.


Here is an example of a different page that employs such a sidebar menu:

The child elements of the active parent are displayed beneath the parent. I'd like it to look like that...


I'm starting to think that the amount of time/work it would take to create this kind of menu isn't worth it.. 😄 I'll be pitching a different menu solution tomorrow - if that gets accepted I won't have to deal with the whole menu hassle at all 😄


Sidebar Menu with parent and child elements

Hi Sonja,

Seems like you want to display child elements when you hover on the main menu.
I can suggest a way and let me know if it works for you.

Refer this. I edited the existing coding suiting your requirement.


My Solution

Locate the template and create a custom coded navigation menu.
This will help you but you must know how to add the coding in the template.
Hope you can do it. 🙂

Locate the class or create your own class and add css styling and html.

You can add  CSS and HTML on the template page like this, 

or u can create a external style and link it to the current page.


CSS Coding

.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;

.dropdown {
position: relative;
display: inline-block;

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}


HTML Coding
<div class="dropdown">
<button class="dropbtn">Erste Hilfe</button>
<div class="dropdown-content">
<a href="#">VERBANDKOFFER</a>
<a href="#">BRANCHENKOFFER</a>
<a href="#">VERBANDSCHRÄNKE</a>
<a href="#">SCHILDER</a>
<div class="dropdown">
<button class="dropbtn">AUGENSPÜLUNGEN</button>
<div class="dropdown-content">

This is just a reference for you, you can customize it based on your reference.

Note: If you want to display dropdown menu based on a button click refer this:
Needs Javascript coding for button click event.

Let me know how it went!