Additional customization classes
Custom classes can be added to each menu item. This can be helpful when extending or creating your own menu designs.
To customize the style of a menu or collection of menu items, you can add a custom CSS class to the menu, and then target this with your own CSS. Ideally, this CSS would be added to your theme, but can also be added to the site in the "Custom CSS" section of our PageBuilder widget.
To add support for a "right-arrow" css class, the resulting class that is required in your stylesheet will always be prefixed by .menu-block__tag- , for example:
.menu-block__tag-right-arrow
Built-in classes
We also have a few built-in classes that can be used to further customize the look and feel of a menu item.
title-first
Adding the "title-first" class will reverse the order of a menu item image and text so that the text or "title" is shown first and the image is after.
hide-title
Adding "hide-title" will hide this menu items text or "title". This is useful when creating image-only columns.
In this example, the last three menu items consist of a link and image but the title text is hidden.
square-images
Adding the class "square-images" is helpful when using the "Inline images" design to show images as squares rather than circles.
bold
Use "bold" to change the font weight. This can be used to help promote certain links within the menu, e.g. View All.
auto-width
Use "auto-width" on a top-level menu item to scale the flyout menu from full-width to the size of the menu items beneath it.
