Detailed Menu

[Woodsy]

Hi all, we are looking into creating a dropdown menu similar to https://monday.com/
where the Use Cases option drops down to show a more detailed selection of navigation points than what can currently be done with the basic Hubspot menu.

I would be really grateful if anyone could point me in the right direction or offer some helpful tips on how I would go about creating something similar in Hubspot ? I'm not sure if I would still use the main hubsopt menu feature but somehow link it to an overlay or completely bypass the menu feature and build the menu from scratch.

[Anton · Accepted solution]

Hi @Woodsy, 

first of all - it's possible to build something like this in HubSpot but it can be extremly tedious.
I've build some mega menus in the past and depending on the customers need it took a long time to develop. 

Some ideas:
1. for "multi column" dropdown display you can use flexbox or other grid-systems(like bootstrap) with :nth-child parameter

Like

ul.mega-menu{
some code here
}

ul.mega-menu li.first-level.has-mega-menu-child{
some code here
}

ul.mega-menu li.first-level.has-mega-menu-child ul{
max-width:1260px; /* your container with*/
background: #ffffff /*background color of the dropdown */
}

ul.mega-menu li.first-level.has-mega-menu-child ul li{
width:calc( 100% / 4);
padding:0 30px;
}

ul.mega-menu li.first-level.has-mega-menu-child ul li:nth-of-type(1) a{
styling for the heading of the "headline" of the first list
}
ul.mega-menu li.first-level.has-mega-menu-child ul li:nth-of-type(1) a:before{
width:30px;
height:30px;
background-image:url('path/to/image/you/want.jpg');
if you want to add an icon before the first heading
}

ul.mega-menu li.first-level.has-mega-menu-child ul li:nth-of-type(n+2){
styling for the links
}

This can be done but get out of control very quickly since you'll need to adress every "subcategory" with those pseudo-elements.

2. You can write a (global) custom module which would have the look & feel of the desired mega menu structure and be populated with multiple (simple) menus. It's up to you if you want to use simple menus(Content) or regular menus(Selector). In this case the difference would be that the simple menu could be modified only by people who have access to the design-manager or page-builder function. The regular menu could be edited by people who have access to the Hub Settings. 

If you don't want to write the html/css stuff from scratch, grab a mega menu layout/script from envato or other page and modify it for HubSpot. 

To get the image infront of the first "heading" you can add 

<span class="your-class"><span> Navigation name

to the desired regular navigation link (in the settings) to get the image before the name. But you'll still need to do a lot of custom css coding. 


Personally I prefer the custom module solution since I don't have to humiliate the exisiting css and code 🙂

best,

Anton