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