Default Menu Module Markup
The default menu module, and hubl menu tags render navigation menus on your templates and pages, based on various settings and the menu trees tied to them. This article explains the markup that is outputted by menu modules and goes over some of the CSS selectors that can be used to style them.
There are two menu modules, the Menu module(formerly called Advanced Menu), and the Simple Menu module.
The key difference being the source of the menu information. The standard Menu module pulls the menu structure from Content Settings > Navigation. The Simple Menu module, displays the template default menu structure or the menu structure set at the page level(if one is set).
If you'd like full control over the menu markup, you should use the menu() function instead of the menu modules. In-fact that's how we created the menu module in the CMS theme boilerplate.
Like every other module in HubSpot, menu modules are wrapped in module wrapper markup. These div and span tags make the module editable via the content editor UI and include classes for the module type as well as drag and drop template's responsive grid. The menu markup of both the menu and simple menu modules is the same, with the exception of some of the classes applied to wrapper and menu div.
The actual menu renders as an ul
wrapped in a class="hs-menu-wrapper"
div. The hs-menu-wrapper div has additional classes based upon the menu modules settings. Within the ul
each menu item is an a
tag wrapped in a li
. The li
tag has a class that indicates the depth of the item in the menu tree (ex. hs-menu-depth-1
).
If the li item contains a nested child menu, it will have the additional class of hs-item-has-children
. The child menu renders as a nested ul with the class hs-menu-children-wrapper
. When you visit a page that is included in your menu tree, the class active-branch
is added to the parent li
items and a class of active
is added to that page's particular li
item.
Below is the markup of the advanced menu tree depicted here.

hs-menu-flow-horizontal
or hs-menu-flow-vertical
to the menu wrapper div. This class can be used in CSS selectors to style horizontal and vertical menus differently.The Enable Flyouts? setting adds the class of flyouts
or no-flyouts
to the menu wrapper div. This class can be used in CSS selectors to target menus with or without dropdowns to hide them based upon this setting.Thank you for your feedback, it means a lot to us.