Menu Item Styles

The menuItemStyles prop allows you to customize the style of the menu items.

Props

type MenuItemStyles = {
  root?: ElementStyles;
  button?: ElementStyles;
  label?: ElementStyles;
  prefix?: ElementStyles;
  suffix?: ElementStyles;
  icon?: ElementStyles;
  subMenuContent?: ElementStyles;
  subMenuExpandIcon?: ElementStyles;
};

type ElementStyles =
  | CSSObject
  | ((params: MenuItemStylesParams) => CSSObject | undefined);

type MenuItemStylesParams = {
  level: number;
  disabled: boolean;
  active?: boolean;
  isSubmenu: boolean;
  open?: boolean;
};

The MenuItemStyles object allows you to customize the style of various elements within the menu item. Each property corresponds to a specific element and accepts a CSSObject that contains the styles.

Property	Description
root	The root element of all the menu-items and submenus.
button	The button element of all the menu-items and submenus.
label	The label element of all the menu-items and submenus.
prefix	The prefix element of all the menu-items and submenus.
suffix	The suffix element of all the menu-items and submenus.
icon	The icon element of all the menu-items and submenus.
subMenuContent	The content of sub menu element of all the submenus.
subMenuExpandIcon	The expand icon of sub menu element of all the submenus.

The MenuItemStylesParams object contains the following properties:

Property	Description
level	The depth level of the menu item.
disabled	Whether the menu item is disabled.
active	Whether the menu item is active.
isSubmenu	Whether the menu item is a submenu.
open	Whether the submenu associated with the menu item is open or closed.

You can customize these styles by providing a CSSObject with appropriate style properties.

With Parameter

The menuItemStyles prop takes a MenuItemStylesParams object as a parameter. This allows you to apply styles based on different conditions.

By using the MenuItemStylesParams object, you can dynamically apply styles based on the provided parameters.

Example

/horizontal-menu/menu/menu-item-styles/with-params

Source Code

Without Parameter

The menuItemStyles prop directly returns a CSSObject without any parameters.

Example

/horizontal-menu/menu/menu-item-styles/without-params

Source Code