Skip to main content

Icon

The icon prop allows you to add an icon to the menu item. The icon prop accepts a React element, which can be any valid JSX or component that represents the desired icon. This gives you the flexibility to use popular icon libraries, custom SVG icons, or any other icon implementation you prefer.

Propsโ€‹

icon?: ReactElement

Exampleโ€‹

/horizontal-menu/menu-item/icon

Source Codeโ€‹

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

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

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

const Icon = () => {
  return (
    <div className={classnames('flex items-center plb-2.5 pli-6 w-full', styles.customStyles)}>
      <HorizontalNav>
        <Menu>
          <MenuItem icon={<>๐Ÿ”ฅ</>}>Analytics Dashboard</MenuItem>
          <MenuItem icon={<>๐Ÿ”ฅ</>}>Calendar</MenuItem>
          <MenuItem icon={<>๐Ÿ”ฅ</>}>FAQ</MenuItem>
          <MenuItem icon={<>๐Ÿ”ฅ</>}>Form Layout</MenuItem>
          <MenuItem icon={<>๐Ÿ”ฅ</>}>Documentation</MenuItem>
        </Menu>
      </HorizontalNav>
    </div>
  )
}

export default Icon