Menu CSS Classes

You can use the classes listed below to style your Menu elements with CSS.

For more information on styling your elements with CSS, see Styling Elements with CSS and the MDN CSS reference docs.

Anchor menu classes

.anchor-menu

Targets anchor menu elements. For example:

1

.anchor-menu__item

Targets anchor menu list item elements. For example:

1

.anchor-menu__label

Targets anchor menu list item text. For example:

1

Dropdown menu classes

.dropdown-menu

Targets dropdown menu elements. For example:

1

.dropdown-menu__item

Targets dropdown menu items. For example:

1

.dropdown-menu__submenu

Targets dropdown submenu containers. For example:

1

Horizontal menu classes

.horizontal-menu

Targets horizontal menu elements. For example:

1

.horizontal-menu__item

Targets horizontal menu items. For example:

1

.horizontal-menu__item-label

Targets horizontal menu item labels. For example:

1

.horizontal-menu__submenu-container

Targets horizontal submenu containers. For example:

1

.horizontal-menu__submenu-title

Targets the menuItem that opens the submenu. For example:

1

.horizontal-menu__submenu-title-label

Targets the label of the menuItem that opens the submenu. For example:

1

.horizontal-menu__submenu-item

Targets horizontal submenu items. For example:

1

.horizontal-menu__submenu-item-label

Targets horizontal submenu item labels. For example:

1

Vertical menu classes

.vertical-menu

Targets vertical menu elements. For example:

1

.vertical-menu__item

Targets vertical menu items. For example:

1

.vertical-menu__item-label

Targets vertical menu item labels. For example:

1

.vertical-menu__submenu

Targets vertical submenu containers. For example:

1

.vertical-menu__arrow

Targets vertical menu expand/collapse icons. For example:

1