Left hand menu as well as top nav

[TRimmer]

I am trying to create a menu on the left of the page as well as the top menu bar (very similar in layout to the settings page in HubSpot settings) - I don't know how to get to that point.

I'd also like one like of descriptor text under the name; eg -

Events

see past events

Could someone help? or at least give me a starting point?

Thank you!

[Anton · Accepted solution]

Hi @TRimmer, 

you have several approaches for a description of a nav item:

• easiest one: Recommended if the description is not to long - simply write your nav name like this
  

  and style the class as you like via CSS

• moderate one: create a custom menu module with a HubDB. The HubDB should have at least 3 columns; Label, description and link
• expert one: create a custom menu module with a menu node basically a mix of the previous two options

For a sidebar navigation:
This can be done with a custom template like this. Note: The {% block %}{% endblock %} elements give you the ability to change content through the partial-templates.

{# start header #}
<header>
{% block header %}
{% endblock header %}
</header>
{# end header #}

{# start sidebar #}
<aside>
{% block sidebar %}
{% endblock sidebar %}
</aside>
{# end sidebar #}

{# start content #}
<main>
{% block body %}
{% endblock body %}
</main>
{# end content #}

{# start footer #}
<footer>
{% block footer %}
{% endblock footer %}
</footer>
{# end footer #}

What you will have to do is:

• create global partials or global modules and put them in the sidebar block
• style everything with CSS
• add JS for functionality 

best, 

Anton