Skip to main content

Menu Section Style

The Menu Section Style feature provides the flexibility to apply custom styling to the navigation sidebar. With the menuSectionStyle prop, you can pass a set of CSS properties to customize different elements within the menu section according to your design preferences.

Props​

type MenuSectionStyles = {
  root?: CSSObject
  label?: CSSObject
  prefix?: CSSObject
  suffix?: CSSObject
  icon?: CSSObject
}

The menuSectionStyle prop accepts an object with multiple properties, each representing a specific element within the menu. These properties include:

PropertyDescription
rootThis property allows you to style the root element of the menu section.
labelThis property allows you to style the label of all the menu sections.
prefixThis property allows you to style any prefix elements within all the menu sections.
suffixThis property allows you to style any suffix elements within all the menu sections.
iconThis property allows you to style the icon associated with all the menu sections.

These properties can be customized by providing CSS objects with appropriate styles.

Example​

/vertical-menu/menu/menu-section-styles

Source Code​