Version:

    Creating styles for menus

    Use Custom list styles to affect both the appearance and interactivity of your menus. The following classes are applied to your menu list items when a user interacts with a menu link. You can use these classes to affect the appearance and display of your menu list items which content your menu links.

    • 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 style helpers

    The process of creating a Custom list style for an interactive menu is quite complex unless you are an experienced front-end developer. For this reason, Site Studio includes a number of Style helpers for you to use to quickly create styles for different types of interactive menus. For information on how to use Style helpers, see Using style helpers.

    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.