Skip to main content

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

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