---
title: "Menu button element"
date: "2019-07-10T15:19:52+00:00"
summary: "Enhance your menu's functionality with the Menu button element. Learn how to toggle submenu visibility, customize interactions, and apply animations for a more dynamic user experience on your website."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/menu-button-element"
id: "3d1aff5c-f191-46a8-8a46-c915ee711a57"
---

Table of contents will be added

Use the Menu button element on your Menu template to toggle submenu visibility.

Locating the menu button element
--------------------------------

To find the Menu button element:

1.  Navigate to Site Studio > Templates > **Menu templates**
2.  **Create** or **Edit** a Menu template
3.  Click the **+ button** on the Layout canvas
4.  Within the Elements tab, look for the Menu button element.

![e0002c7b-menu-button.png](https://acquia.widen.net/content/l5viqkdxjs/web/e0002c7b-menu-button.png?v=577f45ea-bf16-458a-add7-36fa36b7820a)

Interaction
-----------

*   **Interaction** - Set the interactive behavior of your menu button within your menu.
    
    *   **On click, toggle sub-menu visibility** - When the user clicks the menu button it will show or hide the sub-menu
        *   **jQuery animation -** Apply a jQuery animation on hover of the link to the 'Target jQuery selector'. Depending on the animation selected additional related options will appear. More information about the animations here: [http://api.jqueryui.com/category/effects](http://api.jqueryui.com/category/effects)
            *   **Target jQuery selector** - Set the selector to target, for example .dropdown
            *   **Easing** - Set the jQuery Easing to apply.   
                More information about the Easing options here: [http://api.jqueryui.com/easings](http://api.jqueryui.com/easings)
            *   **Duration (ms)** - Set in milliseconds, how long the animation should take to complete.
    *   **On click, toggle sub-menu visibility and hide sibling items** - When the user clicks the menu button it will show or hide the sub-menu and close other sub-menus at the same level
        *   **jQuery animation -** Apply a jQuery animation on hover of the link to the 'Target jQuery selector'. Depending on the animation selected additional related options will appear. More information about the animations here: [http://api.jqueryui.com/category/effects](http://api.jqueryui.com/category/effects)
            *   **Target jQuery selector** - Set the selector to target, for example .dropdown
            *   **Easing** - Set the jQuery Easing to apply.   
                More information about the Easing options here: [http://api.jqueryui.com/easings](http://api.jqueryui.com/easings)
            *   **Duration (ms)** - Set in milliseconds, how long the animation should take to complete.
    *   **On click, toggle parent menu visibility -** When the user clicks the menu button it will show or hide the parent menu
        *   **jQuery animation -** Apply a jQuery animation on hover of the link to the 'Target jQuery selector'. Depending on the animation selected additional related options will appear. More information about the animations here: [http://api.jqueryui.com/category/effects](http://api.jqueryui.com/category/effects)
            *   **Target jQuery selector** - Set the selector to target, for example .dropdown
            *   **Easing** - Set the jQuery Easing to apply.   
                More information about the Easing options here: [http://api.jqueryui.com/easings](http://api.jqueryui.com/easings)
            *   **Duration (ms)** - Set in milliseconds, how long the animation should take to complete.

Custom style
------------

*   **Button style** - Sets a custom button style for the Menu button. For more information see [Creating custom styles](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "Creating custom styles").

Match heights
-------------

*   **Match heights** - Match the height of the element using
    *   **None** - Removes the match heights at the specific breakpoint
    *   **Class** - Match the height of the element with another element with the same class name
    *   **Children with class** - Match the heights of any child elements with the same class name
    *   **Child element** - Match the heights of all child elements of the same type.

For more information on Match heights, see [Match the heights of elements.](/drupal-starter-kits/add-ons/site-studio/match-heights-elements "Match the heights of elements")

Comments
--------

*   **Add comments -** Add comments to the Element. For more information, see [Adding comments to an element](/drupal-starter-kits/add-ons/site-studio/adding-comments-element "Adding comments to an element").