Skip to main content

Expand Menu Icon

The renderExpandIcon prop allows you to customize the icon used for expanding the menu. The renderExpandIcon prop takes a RenderExpandIconParams object as a parameter. This function allows you to fully customize the expand menu icon based on different conditions or states.

Propsโ€‹

The RenderExpandIconParams object passed to the renderExpandIcon function contains the following properties:

type renderExpandIcon?: (params: RenderExpandIconParams) => ReactElement

type RenderExpandIconParams = {
  open: boolean
  level: number
  active: boolean
  disabled: boolean
}
PropertyDescription
openWhether the menu section is open or closed.
levelRepresenting the depth level of the menu section.
activeWhether the menu section is currently active or selected.
disabledWhether the menu item is disabled or not

With Parameterโ€‹

The renderExpandIcon prop is a function that takes a RenderExpandIconParams object as a parameter.

Exampleโ€‹

/horizontal-menu/menu/expand-icon/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 ExpandIconWithParams = () => {
  return (
    <div className={classnames('flex items-center plb-2.5 pli-6 w-full', styles.customStyles)}>
      <HorizontalNav>
        <Menu
          renderExpandIcon={({ open, level, disabled }) => (
            <div className='flex items-center'>
              {disabled ? (
                <>๐Ÿ‘Ž</>
              ) : (
                <>
                  {level === 0 && <span style={{ color: 'green', marginRight: '5px' }}>$</span>}
                  {open ? '-' : '+'}
                </>
              )}
            </div>
          )}
        >
          <SubMenu label='Dashboards'>
            <MenuItem>Analytics</MenuItem>
            <MenuItem>eCommerce</MenuItem>
          </SubMenu>
          <MenuItem>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>
              <SubMenu disabled label='Menu Level 3.2'>
                <MenuItem>Menu Level 4.1</MenuItem>
              </SubMenu>
            </SubMenu>
          </SubMenu>
          <MenuItem>Documentation</MenuItem>
        </Menu>
      </HorizontalNav>
    </div>
  )
}

export default ExpandIconWithParams

Without Parameterโ€‹

The renderExpandIcon prop takes a ReactElement. You can also customize the expand menu icon without any parameters.

Exampleโ€‹

/horizontal-menu/menu/expand-icon/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 ExpandIconWithOutParams = () => {
  return (
    <div className={classnames('flex items-center plb-2.5 pli-6 w-full', styles.customStyles)}>
      <HorizontalNav>
        <Menu
          renderExpandIcon={() => {
            return <span>{'๐Ÿ”ฅ'}</span>
          }}
        >
          <SubMenu label='Dashboards'>
            <MenuItem>Analytics</MenuItem>
            <MenuItem>eCommerce</MenuItem>
          </SubMenu>
          <MenuItem>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>
              <SubMenu disabled label='Menu Level 3.2'>
                <MenuItem>Menu Level 4.1</MenuItem>
              </SubMenu>
            </SubMenu>
          </SubMenu>
          <MenuItem>Documentation</MenuItem>
        </Menu>
      </HorizontalNav>
    </div>
  )
}

export default ExpandIconWithOutParams