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

/horizontal-menu/menu-item/component

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 Component = () => {
return (
<div className={classnames('flex items-center plb-2.5 pli-6 w-full', styles.customStyles)}>
<HorizontalNav>
<Menu>
<MenuItem component={<div></div>}>Analytics Dashboard</MenuItem>
<MenuItem>Calendar</MenuItem>
<MenuItem>FAQ</MenuItem>
<MenuItem>Form Layout</MenuItem>
<MenuItem>Documentation</MenuItem>
</Menu>
</HorizontalNav>
</div>
)
}

export default Component