On Click
The onClick
prop allows you to define a custom function that will be called when the submenu 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
/vertical-menu/submenu/on-click
Click on Dashboards and check console
Source Code
'use client'
// Component Imports
import VerticalNav, { Menu, MenuItem, SubMenu } from '@menu/vertical-menu'
const OnClick = () => {
return (
<div className='flex'>
<VerticalNav customBreakpoint='200px'>
<Menu>
<SubMenu
label='Dashboards'
onClick={() => {
console.log('Submenu clicked')
}}
>
<MenuItem>Analytics</MenuItem>
<MenuItem>eCommerce</MenuItem>
</SubMenu>
<SubMenu label='User'>
<MenuItem>List</MenuItem>
<SubMenu label='View'>
<MenuItem>Overview</MenuItem>
<MenuItem>Security</MenuItem>
<MenuItem>Notifications</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu label='Menu Level'>
<MenuItem>Menu Level 2.1</MenuItem>
<SubMenu label='Menu Level 2.2'>
<MenuItem>Menu Level 3.1</MenuItem>
<MenuItem>Menu Level 3.2</MenuItem>
</SubMenu>
</SubMenu>
</Menu>
</VerticalNav>
<main className='p-4 flex-grow'>
<p>Click on Dashboards and check console</p>
</main>
</div>
)
}
export default OnClick