Skip to main content

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.

PropertyDescription
rootThe root element of all the menu-items and submenus.
buttonThe button element of all the menu-items and submenus.
labelThe label element of all the menu-items and submenus.
prefixThe prefix element of all the menu-items and submenus.
suffixThe suffix element of all the menu-items and submenus.
iconThe icon element of all the menu-items and submenus.
subMenuContentThe content of sub menu element of all the submenus.
subMenuExpandIconThe expand icon of sub menu element of all the submenus.

The MenuItemStylesParams object contains the following properties:

PropertyDescription
levelThe depth level of the menu item.
disabledWhether the menu item is disabled.
activeWhether the menu item is active.
isSubmenuWhether the menu item is a submenu.
openWhether 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​

'use client'

// Third-party Imports
import classnames from 'classnames'

// Component Imports
import HorizontalNav, { Menu, MenuItem, SubMenu } from '@menu/horizontal-menu'

// Style Imports
import styles from '../../styles.module.css'

const MenuItemStylesWithParams = () => {
  return (
    <div className={classnames('flex items-center plb-2.5 pli-6 w-full', styles.customStyles)}>
      <HorizontalNav>
        <Menu
          menuItemStyles={{
            button: ({ disabled, open, isSubmenu, level }) => ({
              ...(level === 0 && { fontSize: '1.075rem' }),
              fontWeight: open ? 500 : 400,
              paddingBlock: '12px',
              color: disabled ? '#a19e9e' : '#000000',
              backgroundColor: isSubmenu ? '#fef0ff' : '#ecfcff'
            })
          }}
        >
          <SubMenu label='Dashboards'>
            <MenuItem>Analytics</MenuItem>
            <MenuItem>eCommerce</MenuItem>
          </SubMenu>
          <MenuItem disabled>Calendar</MenuItem>
          <MenuItem>FAQ</MenuItem>
          <SubMenu label='Menu Level'>
            <MenuItem>Menu Level 2.1</MenuItem>
            <SubMenu label='Menu Level 2.2'>
              <MenuItem>Menu Level 3.1</MenuItem>
              <MenuItem>Menu Level 3.2</MenuItem>
            </SubMenu>
          </SubMenu>
          <MenuItem>Documentation</MenuItem>
        </Menu>
      </HorizontalNav>
    </div>
  )
}

export default MenuItemStylesWithParams

Without Parameter​

The menuItemStyles prop directly returns a CSSObject without any parameters.

Example​

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

Source Code​

'use client'

// Third-party Imports
import classnames from 'classnames'

// Component Imports
import HorizontalNav, { Menu, MenuItem, SubMenu } from '@menu/horizontal-menu'

// Style Imports
import styles from '../../styles.module.css'

const MenuItemStylesWithOutParams = () => {
  return (
    <div className={classnames('flex items-center plb-2.5 pli-6 w-full', styles.customStyles)}>
      <HorizontalNav>
        <Menu
          menuItemStyles={{
            button: {
              color: '#7367F0',
              backgroundColor: '#FFF5FF',
              fontSize: '1rem',
              paddingBlock: '12px',
              fontWeight: 500
            }
          }}
        >
          <SubMenu label='Dashboards'>
            <MenuItem>Analytics</MenuItem>
            <MenuItem>eCommerce</MenuItem>
          </SubMenu>
          <MenuItem disabled>Calendar</MenuItem>
          <MenuItem>FAQ</MenuItem>
          <SubMenu label='Menu Level'>
            <MenuItem>Menu Level 2.1</MenuItem>
            <SubMenu label='Menu Level 2.2'>
              <MenuItem>Menu Level 3.1</MenuItem>
              <MenuItem>Menu Level 3.2</MenuItem>
            </SubMenu>
          </SubMenu>
          <MenuItem>Documentation</MenuItem>
        </Menu>
      </HorizontalNav>
    </div>
  )
}

export default MenuItemStylesWithOutParams