COS Reference

Table of contents
Close

HubSpot menu markup

Advanced menu modules render navigation menus on your templates, based on various settings and the menu trees set up in Content Settings > Advanced Menus. 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.

Menu markup explained

HubSpot Help article screenshot

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 Template Builder's responsive grid. The menu markup of simple and advanced 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" divThe hs-menu-wrapper div has additional classes based upon the advanced 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.

Sample menu markup

    
<div class="span12 widget-span widget-type-menu " style="" data-widget-type="menu" data-x="0" data-w="12">
    <div class="cell-wrapper layout-widget-wrapper">
        <span id="hs_cos_wrapper_module_14465746556332003" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="menu">
        <div id="hs_menu_wrapper_module_14465746556332003" class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal" data-sitemap-name="Demo">
            <ul>
                <li class="hs-menu-item hs-menu-depth-1"><a href="//www.hubspot.com">Top level item 1</a></li>
                <li class="hs-menu-item hs-menu-depth-1"><a href="//www.hubspot.com">Top level item 2</a></li>
                <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children"><a href="//www.hubspot.com">Top level item 3</a>
                    <ul class="hs-menu-children-wrapper">
                        <li class="hs-menu-item hs-menu-depth-2"><a href="//www.hubspot.com">Second level item 1</a></li>
                        <li class="hs-menu-item hs-menu-depth-2"><a href="//www.hubspot.com">Second level item 2</a></li>
                        <li class="hs-menu-item hs-menu-depth-2 hs-item-has-children"><a href="//www.hubspot.com">Second level item 3</a>
                            <ul class="hs-menu-children-wrapper">
                                <li class="hs-menu-item hs-menu-depth-3"><a href="//www.hubspot.com">Third level item 1</a></li>
                                <li class="hs-menu-item hs-menu-depth-3"><a href="//www.hubspot.com">Third level item 2</a></li>
                                <li class="hs-menu-item hs-menu-depth-3"><a href="//www.hubspot.com">Third level item 3</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        </span>
    </div>
</div>
    

Classes added by settings

Advanced menu module settings control what markup gets rendered by HubSpot and add classes that be used to style certain menu features. The Advanced menu type and the Max levels settings control what parts of the menu tree render in the menu markup. Additionally, the Menu control selects which advanced menu to use.

The Orientation setting adds a class 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.

Styling menus

Below are some example CSS selectors that can can be used to style HubSpot menus. You can see some of these selectors in use with CSS declarations in HubSpot's Boilerplate CSS file


/* Menus */
.hs-menu-wrapper ul {
   /* Targets all unordered lists within HubSpot menus */
}

/* Horizontal Menu
   ========================================================================== */

.hs-menu-wrapper.hs-menu-flow-horizontal ul {
/* Targets all unordered lists within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul li{
/* Targets all list items within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul li a{
/* Targets all links within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul {
/* Targets the top-level unordered list within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
/* Targets top-level list items within the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
/* Targets top-level list links within the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children {
/* Targets list items with children with the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
/* Targets second-level unordered lists when flyouts are enabled (for styling dropdowns) */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
/* Targets links within second-level unordered lists  */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper li.hs-item-has-children ul.hs-menu-children-wrapper {
/* Targets third-level unordered lists (for styling dropdowns)*/
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper {
/* Targets second-level unordered list when top-level menu item is hovered (use to reveal dropdowns) */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children.active-branch{
/* Targets top-level active branch unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper {
/* Targets second-level unordered list within active branch */
}
.hs-menu-wrapper.hs-menu-flow-horizontal li.active a{
/* Targets the link within the active list item */
}

/* Vertical Menu
   ========================================================================== */ 

.hs-menu-wrapper.hs-menu-flow-vertical ul {
/* Targets all unordered lists within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical ul li a {
/* Targets all list items within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical ul li a {
/* Targets all links within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul {
/* Targets the top-level unordered list within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-menu-depth-1 > a {
/* Targets top-level links in vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children {
/* Targets top-level list items with children */
}


/* No flyouts
   ========================================================================== */ 
.hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts .hs-menu-children-wrapper {
/* Targets child menus when flyouts are disabled */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.no-flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
/* Targets second-level child menus when flyouts are disabled */
}    

Mobile menus

While menus can be made "mobile-friendly" using purely CSS, creating dynamic mobile menus that support multiple levels of navigation requires the use of Javascript. This tutorial describes the implementation of such a mobile menu.