Style Sheets


React-Menu comes with the following CSS files in the dist folder:


Includes minimal styles (arrow, reset). This can be a starting point for customising styles.

You may import this file or copy the CSS into your own stylesheets or CSS-in-JS solution, and optionally remove styles you don't use (e.g. the arrows).

index.cssDefault styles.

Includes dark theme styles, working in conjunction with index.css.

Please see a CodeSandbox example for how to enable dark theme for menu.


Different transition animations when menu opens or closes. Currently there is only one as slide.css.

The following CodeSandbox examples help you get started with customising styles:

All styles are locally scoped to the components except in the CSS/SASS example.

CSS selectors


React-Menu follows the BEM methodology to name CSS selectors. All default styles use CSS selectors with the lowest possible specificity.

Selector nameDescription
.szh-menu-containerRoot element that contains the menu.
.szh-menuMenu element.
  • .szh-menu--state-opening
  • .szh-menu--state-open
  • .szh-menu--state-closing
  • .szh-menu--state-closed
Menu state.
  • .szh-menu--dir-left
  • .szh-menu--dir-right
  • .szh-menu--dir-top
  • .szh-menu--dir-bottom
Direction in which the menu expands.
.szh-menu__arrowMenu arrow element.
  • .szh-menu__arrow--dir-left
  • .szh-menu__arrow--dir-right
  • .szh-menu__arrow--dir-top
  • .szh-menu__arrow--dir-bottom
Direction in which the menu expands (arrow points to the opposite direction).
Selector nameDescription
.szh-menu__itemMenu item element.
.szh-menu__item--hoverMenu item is hovered and focused.
.szh-menu__item--disabledMenu item is disabled.
.szh-menu__item--anchorMenu item is a URL link.
.szh-menu__item--checkedMenu item is checked (only for a radio or checkbox item).
  • .szh-menu__item--type-radio
  • .szh-menu__item--type-checkbox
Menu item is a radio or checkbox item.

Always present on a FocusableItem.


Always present on a submenu item, which is set by the label prop on SubMenu component.

.szh-menu__item--openPresent on a submenu item when it's submenu is open.

Other components

Selector nameDescription
.szh-menu__submenuSubMenu container element.
.szh-menu__dividerMenuDivider element.
.szh-menu__headerMenuHeader element.
.szh-menu__groupMenuGroup element.
.szh-menu__radio-groupMenuRadioGroup element.
.szh-menu-buttonMenuButton element.
.szh-menu-button--openMenu controlled by the button is open.



style-utils helps you write CSS selectors more easily with CSS-in-JS. Using it is optional but highly recommended. There are some examples demonstrating its usage.



React-Menu has a default z-index of 100 for positioned menu. If this value is not appropriate for your app, you could adjust it by overriding the .szh-menu selector.

E.g., set z-index to 1000:

.szh-menu {
  z-index: 1000;