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โ€‹

/vertical-menu/menu-item/icon

Source Codeโ€‹

'use client'

// Component Imports
import VerticalNav, { Menu, MenuItem } from '@menu/vertical-menu'

const Icon = () => {
  return (
    <VerticalNav customBreakpoint='200px'>
      <Menu>
        <MenuItem icon={<>๐Ÿ”ฅ</>}>Analytics Dashboard</MenuItem>
        <MenuItem icon={<>๐Ÿ”ฅ</>}>Calendar</MenuItem>
        <MenuItem icon={<>๐Ÿ”ฅ</>}>FAQ</MenuItem>
        <MenuItem icon={<>๐Ÿ”ฅ</>}>Form Layout</MenuItem>
        <MenuItem icon={<>๐Ÿ”ฅ</>}>Documentation</MenuItem>
      </Menu>
    </VerticalNav>
  )
}

export default Icon