Style Sheets

#

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

FileDescription
core.css

Includes only necessary styles that make menu functional (positioning, arrow display). This is usually 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.
theme-dark.css

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

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

transitions/*.css

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.

Menu and ControlledMenu

#
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).

MenuItem

#
Selector nameDescription
.szh-menu__itemMenu item element.
.szh-menu__item--hoverMenu item is hovered and focused.
.szh-menu__item--activeMenu item is active (pressed).
.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.
.szh-menu__item--focusable

Always present on a FocusableItem.

.szh-menu__item--submenu

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

#

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.

z-index

#

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;
}