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).
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
ulwrapped 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 tag has a class that indicates the depth of the item in the menu tree (ex.
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
Below is the markup of the advanced menu tree depicted here.
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
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.