Transition Duration
The transitionDuration
prop allows you to set the duration of the animation when the navigation sidebar is being collapsed, expanded or toggled. The value is in milliseconds (ms).
Props
transitionDuration?: number
Default Props
transitionDuration = 300 // milliseconds
Example
/vertical-menu/vertical-nav/transition-duration
Source Code
'use client'
// MUI Imports
import Checkbox from '@mui/material/Checkbox'
import FormControlLabel from '@mui/material/FormControlLabel'
// Component Imports
import VerticalNav, { Menu, MenuItem, SubMenu } from '@menu/vertical-menu'
// Hook Imports
import useVerticalNav from '@menu/hooks/useVerticalNav'
const TransitionDuration = () => {
const { isBreakpointReached, updateVerticalNavState, isCollapsed } = useVerticalNav()
return (
<div className='flex'>
<VerticalNav customBreakpoint='200px' transitionDuration={1000}>
<Menu>
<SubMenu label='Dashboards'>
<MenuItem>Analytics</MenuItem>
<MenuItem>eCommerce</MenuItem>
</SubMenu>
<MenuItem>Calendar</MenuItem>
<MenuItem>FAQ</MenuItem>
<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>
<MenuItem>Documentation</MenuItem>
</Menu>
</VerticalNav>
<main className='p-4 flex-grow'>
{!isBreakpointReached && (
<FormControlLabel
label='Collapse'
control={<Checkbox onChange={() => updateVerticalNavState({ isCollapsed: !isCollapsed })} />}
/>
)}
</main>
</div>
)
}
export default TransitionDuration