As of now, there is now way to edit the Navigation Menu template under the page template to let’s say add a region above or below it.

It’s possible to do it using jQuery though.

The way to do it is to have a region (in any position on the page) and to move it inside the left side navigation menu. Make sure the region you want move doesn’t have any item in it, because it could result in error.

For more info/details you could have a look at Martin D’Souza’s blogposts:

Let’s start by creating a Pie Chart region using the “Blank with Attributes” template. Under Appearance, I set the CSS Classes attribute to “underNavBar”.
Under the region’s attributes, I disabled the labels and the markers. I also fixed the width/height so that it would fit in the side menu region.

Now to get the region to be displayed above or below the left side navigation menu, we need to create a Page Load dynamic action that executes the following JavaScript code:

Use this one if you want the region to display above the left side menu


Use this one if you want the region to display below the left side menu


What’s left to do is adjust the CSS of the it all.

#t_TreeNav {
    display: flex;
    flex-direction: column;
    height: 100%;

#t_TreeNav ul {
    flex: 1 0 auto;

    flex: 0 0 auto;

You can also hide the region when the menu is collapsed.

#t_PageBody.apex-side-nav.js-navCollapsed .underNavBar {
   display: none;

You will then get something like this:

You can have a look at my Demo Application