---
title: "Adding interactivity to your menu"
date: "2018-01-15T16:11:33+00:00"
summary: "Enhance your Site Studio menus with interactive features. Learn how to show/hide sub-menus on hover or click, and style menu items using custom classes for a dynamic user experience."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/adding-interactivity-your-menu"
id: "d13eb74c-0c95-405d-a3ab-4c08cde8c247"
---

Table of contents will be added

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](/drupal-starter-kits/add-ons/site-studio/menu-list-item-element "Menu list item element") and [Menu link element](/drupal-starter-kits/add-ons/site-studio/menu-link-element "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.

Menu classes
------------

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.

Menu list item element interactive settings
-------------------------------------------

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

*   **Initially hidden** - Adds the classes _is-collapsed_ and _has-children_ to child menus
*   **Initially visible** - Adds the classes _is-expanded_ and _has-children_ to child menus
*   **Use active trail** \- Adds the classes _is-expanded_ and _has-children_ to child menus within the active trail

Menu link item element interactive settings
-------------------------------------------

Within the Menu link element (used in your Menu templates) there are the following options:

**Interaction -** Set the interactive behavior and classes applied to your menu links and 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.