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, DX8 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.