Style Sheets
#React-Menu comes with the following CSS files in the dist folder:
| File | Description |
|---|---|
| core.css | 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.css | Default styles. |
| theme-dark.css | Includes dark theme styles, working in conjunction with 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 |
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 name | Description |
|---|---|
| .szh-menu-container | Root element that contains the menu. |
| .szh-menu | Menu element. |
| Menu state. |
| Direction in which the menu expands. |
| .szh-menu__arrow | Menu arrow element. |
| Direction in which the menu expands (arrow points to the opposite direction). |
MenuItem
#| Selector name | Description |
|---|---|
| .szh-menu__item | Menu item element. |
| .szh-menu__item--hover | Menu item is hovered and focused. |
| .szh-menu__item--disabled | Menu item is disabled. |
| .szh-menu__item--anchor | Menu item is a URL link. |
| .szh-menu__item--checked | Menu item is checked (only for a radio or checkbox item). |
| Menu item is a radio or checkbox item. |
| .szh-menu__item--focusable | Always present on a |
| .szh-menu__item--submenu | Always present on a submenu item, which is set by the |
| .szh-menu__item--open | Present on a submenu item when it's submenu is open. |
Other components
#| Selector name | Description |
|---|---|
| .szh-menu__submenu | SubMenu container element. |
| .szh-menu__divider | MenuDivider element. |
| .szh-menu__header | MenuHeader element. |
| .szh-menu__group | MenuGroup element. |
| .szh-menu__radio-group | MenuRadioGroup element. |
| .szh-menu-button | MenuButton element. |
| .szh-menu-button--open | Menu 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;
}