Skip to main content

Component

The component prop allows you to change the wrapper component of a menu item. The component prop accepts either a string or a ReactElement. If you pass a string, it will be used as the HTML tag for the wrapping component. If you pass a ReactElement, it will be rendered as the wrapping component itself; for example, <Link> component from a routing library.

Props​

component?: string | ReactElement
Default Value
component=<a></a>

Example​

/vertical-menu/menu-item/component

Source Code​

'use client'

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

const MenuItemComponent = () => {
  return (
    <VerticalNav customBreakpoint='200px'>
      <Menu>
        <MenuItem component={<div></div>}>Analytics Dashboard</MenuItem>
        <MenuItem>Calendar</MenuItem>
        <MenuItem>FAQ</MenuItem>
        <MenuItem>Form Layout</MenuItem>
        <MenuItem>Documentation</MenuItem>
      </Menu>
    </VerticalNav>
  )
}

export default MenuItemComponent