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.

     

    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