How to customize the HubSpot menu with icons, descriptions, and a horizontal layout?

[STubauMestres]

Hi everyone,

We're currently using a theme in HubSpot that only gives us a basic hamburger menu, and we’re facing some limitations:

• We can’t add descriptions or customize the menu items.

• We’d like to switch to a horizontal top menu bar instead of the hamburger menu.

• Ideally, we want each menu item to include an icon, a label, and a short description below or next to the icon.

• HubSpot seems to use a different templating language, and we're not sure how to implement these customizations.

What are our options?
Should we switch to a different theme or hire a developer to code this manually?
Are there modules or themes in the HubSpot marketplace that already offer this level of customization?

Any advice or guidance would be greatly appreciated!

Thanks in advance!

[ArisudanTiwari · Accepted solution]

Hi @STubauMestres ,

You're right that the default HubSpot menu modules are quite limited when it comes to adding icons, descriptions, or switching from a hamburger to a horizontal layout.

Here are some practical options you can consider:

1. Use a Premium Theme
   Some themes in the HubSpot Marketplace (https://ecosystem.hubspot.com/marketplace/apps) come with built-in advanced navigation features, including horizontal menus, icon support, and descriptions under each menu item. Just search for terms like "mega menu" or "icon navigation" when browsing. This is often the easiest and fastest way to get what you need, just make sure the new theme matches your brand and layout needs.
   
   

2. Build a Custom Menu Module
   If you want something fully customized, a developer can create a new menu module using HubL, HTML, CSS, and JavaScript. This allows you to display icons, text, and descriptions exactly how you want. The content can even be managed through module fields or HubDB, making it easy for non-technical users to update.
   
   

3. Use a Marketplace Module
   There are also individual menu/navigation modules in the HubSpot Asset Marketplace that you can plug into your existing theme. Many of these support icons and descriptions, and some don’t require any coding. Just be sure to check the documentation before installing to ensure it meets your specific needs.
   
   

4. Hire a HubSpot Developer or Agency
   If your requirements are complex or highly custom, working with a HubSpot-certified developer or partner agency is a great option. They can build something that looks good, works well across devices, and fits right into your current site structure.

A few tips to keep in mind:

• Use HubDB or custom module fields so your marketing team can manage content easily.

• Make sure the menu design is mobile responsive.

• Use SVG icons for fast performance and scalability.

Here are a few helpful links if you want to explore more:

• HubSpot Knowledge Base: Set up navigation menus – https://knowledge.hubspot.com/website-pages/set-up-your-site-s-navigation-menus

• Developer Guide: Menus and Navigation – https://developers.hubspot.com/docs/guides/cms/content/menus-and-navigation

• YouTube: Custom Navigation Menu – https://www.youtube.com/watch?v=jSLD14cmRYY

Hope this helps you decide the best route to take.

[Anton · Accepted solution]

Hey @STubauMestres, 

from my experience - as a developer - the only solution is to hire a developer who will create a custom module/global partial that will bring your desired navigation layout to life. 

The reason for this is:

While you technically can add icons, labels, descriptions etc. to the navigation menu (settings -> content -> navigation menus), it requires at least a bare minimum of knowledge of HTML and CSS.

The immense downside of doing it via the default navigation option is, that it will become super hard to manage in the future.

Just imagine - you would have the knowledge of how to do those things and would be "the navigation master". During a vacation or so, a colleage needs to change something - either he disturbes you in your well deserved holiday or it's gonna end on your task-list. 

Most Marketplace themes don't support such navigations because such mega-menus (the technical term) are 99.9% developed individual per client/company. Simply because there are tons of possible options, layouts and other factors how you can tackle a solution like this.

If you need a developer - I'm happy to help. 

Feel free to drop me a DM or click on my signature and book a free meeting

best, 

Anton

[ArisudanTiwari · Accepted solution]

Hi @STubauMestres ,

You're right that the default HubSpot menu modules are quite limited when it comes to adding icons, descriptions, or switching from a hamburger to a horizontal layout.

Here are some practical options you can consider:

1. Use a Premium Theme
   Some themes in the HubSpot Marketplace (https://ecosystem.hubspot.com/marketplace/apps) come with built-in advanced navigation features, including horizontal menus, icon support, and descriptions under each menu item. Just search for terms like "mega menu" or "icon navigation" when browsing. This is often the easiest and fastest way to get what you need, just make sure the new theme matches your brand and layout needs.
   
   

2. Build a Custom Menu Module
   If you want something fully customized, a developer can create a new menu module using HubL, HTML, CSS, and JavaScript. This allows you to display icons, text, and descriptions exactly how you want. The content can even be managed through module fields or HubDB, making it easy for non-technical users to update.
   
   

3. Use a Marketplace Module
   There are also individual menu/navigation modules in the HubSpot Asset Marketplace that you can plug into your existing theme. Many of these support icons and descriptions, and some don’t require any coding. Just be sure to check the documentation before installing to ensure it meets your specific needs.
   
   

4. Hire a HubSpot Developer or Agency
   If your requirements are complex or highly custom, working with a HubSpot-certified developer or partner agency is a great option. They can build something that looks good, works well across devices, and fits right into your current site structure.

A few tips to keep in mind:

• Use HubDB or custom module fields so your marketing team can manage content easily.

• Make sure the menu design is mobile responsive.

• Use SVG icons for fast performance and scalability.

Here are a few helpful links if you want to explore more:

• HubSpot Knowledge Base: Set up navigation menus – https://knowledge.hubspot.com/website-pages/set-up-your-site-s-navigation-menus

• Developer Guide: Menus and Navigation – https://developers.hubspot.com/docs/guides/cms/content/menus-and-navigation

• YouTube: Custom Navigation Menu – https://www.youtube.com/watch?v=jSLD14cmRYY

Hope this helps you decide the best route to take.