Skip to main content

On Click

The onClick prop allows you to define a custom function that will be called when the menu item is clicked. It provides a way to handle the click event and perform specific actions or logic in response to the click.

Props

onClick?: (event: React.MouseEvent<HTMLElement>) => void

Example

/horizontal-menu/menu-item/on-click

Click on Analytics and check console

Source Code

'use client'

// 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 OnClick = () => {
return (
<div className='flex flex-col w-full h-full'>
<div className={classnames('flex items-center plb-2.5 pli-6 w-full', styles.customStyles)}>
<HorizontalNav>
<Menu>
<MenuItem
onClick={() => {
console.log('Analytics Dashboard clicked')
}}
>
Analytics Dashboard
</MenuItem>
<MenuItem>Calendar</MenuItem>
<MenuItem>FAQ</MenuItem>
<MenuItem>Form Layout</MenuItem>
<MenuItem>Documentation</MenuItem>
</Menu>
</HorizontalNav>
</div>
<main className='p-4 flex-grow'>
<p>Click on Analytics and check console</p>
</main>
</div>
)
}

export default OnClick