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.