Application Launcher

You can add interactivity to your menus to show and hide sub-menus on hover or on click. There are settings within the Menu list item element and Menu link element to apply interactivity to your Menus. When applied, these setting use JavaScript to add and remove classes on your Menu list items. You can use a Custom list style to style these classes and change the appearance of your menu items when a user interacts with your menu.

The following classes are applied to your menu list items when a user interacts with a menu link. Use these classes to affect the appearance of your menus when the interacts with them.

is-active - Is applied to the menu list item when the user is on the current link page
has-children - Is applied to the menu list item if the menu item, has children (sub-menus)
is-expanded - Is applied to the menu list item if the menu item has children (sub-menus) and they are expanded
is-collapsed - Is applied to the menu list item if the menu has children (sub-menus) and they are collapsed
in-active-trail - Is applied to the menu list item if the menu item is within the active trail.

Within the Menu list item (used within your Menu templates) there are the following options:

Sets the initial classes on child menus

The following classes are applied to your menu list items when a user interacts with a menu link. Use these classes to affect the appearance of your menus when the interacts with them.

is-active - Is applied to the menu list item when the user is on the current link page
has-children - Is applied to the menu list item if the menu item, has children (sub-menus)
is-expanded - Is applied to the menu list item if the menu item has children (sub-menus) and they are expanded
is-collapsed - Is applied to the menu list item if the menu has children (sub-menus) and they are collapsed
in-active-trail - Is applied to the menu list item if the menu item is within the active trail.

Within the Menu list item (used within your Menu templates) there are the following options:

Child list visibility - Sets the initial classes on child menus

The following classes are applied to your menu list items when a user interacts with a menu link. Use these classes to affect the appearance of your menus when the interacts with them.

is-active - Is applied to the menu list item when the user is on the current link page
has-children - Is applied to the menu list item if the menu item, has children (sub-menus)
is-expanded - Is applied to the menu list item if the menu item has children (sub-menus) and they are expanded
is-collapsed - Is applied to the menu list item if the menu has children (sub-menus) and they are collapsed
in-active-trail - Is applied to the menu list item if the menu item is within the active trail.

Within the Menu list item (used within your Menu templates) there are the following options:

Sets the initial classes on child menus

On hover, toggle sub-menu visibility. On-click, go to link - When the user hovers over the link, it will apply the classes is-expanded and has-children to child menus. If the menu link has no child menus, no classes will be applied. On click, the user will go to the linked page.
On click, toggle sub-menu visibility. If no sub-menu go to link - When the user clicks on the link, it will apply the classes is-expanded and has-children to child menus. When the user clicks again (toggles) on the link, it will apply the classes is-collapsed and has-children to child menus. If the menu link has no child menus, no classes will be applied and the user will go to the linked page.
On click, toggle sub-menu visibility and hide sibling items. If no sub-menu go to link - When the user clicks on the link, it will apply the classes is-expanded and has-children to child menus. When the user clicks again (toggles) on the link, it will apply the classes is-collapsed and has-children to child menus. It will also apply the class is-collapsed to the child menus of siblings. If the menu link has no child menus, no classes will be applied and the user will go to the linked page.
Click through to link - When the user clicks on the link they will go through to the linked page.

Important

The 'Link' element and other elements that include the group of link settings have an option to Add / Remove / Toggle a modifier.

When this action is taken, the element(s) targeted by the jQuery selector are given a class of coh-transition if/while they are transitioning.

This allows transition properties to only be applied when this class is present and not at any other time. For example, when the browser is resized.

This feature prevents unexpected transition animations from showing when a user changes the resolution of their browser.

On hover, toggle sub-menu visibility. On-click, go to link - When the user hovers over the link, it will apply the classes is-expanded and has-children to child menus. If the menu link has no child menus, no classes will be applied. On click, the user will go to the linked page.
On click, toggle sub-menu visibility. If no sub-menu go to link - When the user clicks on the link, it will apply the classes is-expanded and has-children to child menus. When the user clicks again (toggles) on the link, it will apply the classes is-collapsed and has-children to child menus. If the menu link has no child menus, no classes will be applied and the user will go to the linked page.
On click, toggle sub-menu visibility and hide sibling items. If no sub-menu go to link - When the user clicks on the link, it will apply the classes is-expanded and has-children to child menus. When the user clicks again (toggles) on the link, it will apply the classes is-collapsed and has-children to child menus. It will also apply the class is-collapsed to the child menus of siblings. If the menu link has no child menus, no classes will be applied and the user will go to the linked page.
Click through to link - When the user clicks on the link they will go through to the linked page.

Important

Menu classes

Menu list item element interactive settings

Menu classes

Menu list item element interactive settings

Menu classes

Menu list item element interactive settings

Menu link item element interactive settings

Did not find what you were looking for?

Menu link item element interactive settings

Did not find what you were looking for?

Adding interactivity to your menu

Menu classes

Menu list item element interactive settings

Adding interactivity to your menu

Menu classes

Menu list item element interactive settings

Adding interactivity to your menu

Menu classes

Menu list item element interactive settings

Menu link item element interactive settings

Did not find what you were looking for?

Menu link item element interactive settings

Did not find what you were looking for?