Version:
Cohesiondx.com

Are you looking for the latest documentation?

Documentation for Acquia Cohesion V6.0 onwards has moved to https://cohesiondocs.acquia.com

    Creating multi-level menus with interactivity

    You can create templates for multi-level Drupal menus. Before you try this, you should follow the guide for creating a simple single level menu as this explains the full process.

    Structuring a multi-level menu

    The screen-shot below shows the structure of a 3 level menu template. It shows that for each level required in the menu, you must add a new Menu list container, Menu list item and Menu link. These must be nested within the Menu list item of the parent level.

    If you require more than three levels, simply nest additional elements in the same pattern below. You can nest as many levels as you want. Any nested elements not required by your menu are simply ignored.

    Menu-template-element-structure.png

    The structure above is illustrated in the diagram below for a 3 level menu layout.

    Menu-levels-diagram.svg

    Laying out and styling a multi-level menu

    Each level you add to your Menu template uses a new Menu list container <ul>, Menu list items <li's> and Menu links <a>. You can apply styling to each menu level to define its layout and appearance.

    For example, to create a mega-navigation like in the diagram above:

    1. Create a style for the Menu level 1 - Menu list container to place the Menu list items inline
    2. Create a style for the Menu level 2 - Menu list container to place the Menu list items within a panel
    3. Add a Row for columns element and two Columns to the Menu level 2 - Menu list container
    4. Add a Menu list item to both columns
    5. Set the Menu list item in column one to show a range of Menu links from 1-6
    6. Set the Menu list item in column two to show a range of Menu links from 7-999. This should more than accommodate the number of links you need to show in the second column
    7. To add a third level, nest another Menu list container, Menu list item and Menu link within your level two Menu list item
    8. Apply a style to your Menu level 3 - Menu list container to style the third level links.

     

    DX8 knowledge base icon

    Frequently asked questions

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

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.