Disabled
The Disabled feature allows you to disable a menu item, preventing user interaction and indicating that the item is currently inactive or unavailable. The disabled
prop is used to control the disabled state of a menu item.
By setting the disabled
prop to true, the corresponding menu item will be visually disabled and user interactions, such as clicks or hover effects, will be prevented.
Props
disabled?: boolean
Default Value
disabled={false}
Example
/horizontal-menu/menu-item/disabled
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 Disabled = () => {
return (
<div className={classnames('flex items-center plb-2.5 pli-6 w-full', styles.customStyles)}>
<HorizontalNav>
<Menu>
<MenuItem disabled>Analytics Dashboard</MenuItem>
<MenuItem>Calendar</MenuItem>
<MenuItem>FAQ</MenuItem>
<MenuItem>Form Layout</MenuItem>
<MenuItem>Documentation</MenuItem>
</Menu>
</HorizontalNav>
</div>
)
}
export default Disabled