Menu link element

    Use the Menu link element within your Menu list item in your Menu template. The Menu link element allows you to set the interactive behavior of your menu links.

    Locating the menu link element

    To find the Menu link element:

    1. Navigate to DX8 > 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 link element.

    Menu-link.png

    The Menu link element includes the following fields:

    Markup

    • HTML markup - Sets the markup of the Menu link element.

    Interaction

    • Interaction - Set the interactive behavior of your menu links within your menu.
      • On hover, toggle sub-menu visibility. On-click, go to link - When the user hovers over the link, it will display its sub-menus.
      • On click, toggle sub-menu visibility. If no sub-menu go to link - When the user clicks on the link, it will toggle the visibility of sub menus. Any sub-menus already open, will remain open. If the link has no sub-menus, the user will go through 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 toggle the visibility of its sub-menu. If another sub-menu is open, this will close. If the link has no sub-menus, the user will go through to the linked page.
      • Click through to link - When the user clicks on the link they will go through to the linked page.

    Custom style

    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.

    Comments

    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.

    Cohesion DX8 Help center

    Launch our Help center to raise a support ticket or search our knowledge base of common questions and answers.

    DX8 knowledge base icon

    Knowledge base

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    Log in to the Help center to raise an issue. Available Monday - Friday, 09:00 - 17:00 GMT.

    Raise ticket