Skip to main content

Transition Duration

The transitionDuration prop allows you to set the duration of the animation when the submenu is opened or closed. The value is in milliseconds (ms).

Props​

transitionDuration?: number
Default Value
transitionDuration=300 // milliseconds

Example​

/horizontal-menu/menu/transition-duration

Source Code​

// Third-party Imports
import classnames from 'classnames'

// Components Import
import HorizontalNav, { Menu, MenuItem, SubMenu } from '@menu/horizontal-menu'

// Style Imports
import styles from '../styles.module.css'

const TrnasitionDuration = () => {
  return (
    <div className={classnames('flex items-center plb-2.5 pli-6 w-full', styles.customStyles)}>
      <HorizontalNav>
        <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>
      </HorizontalNav>
    </div>
  )
}

export default TrnasitionDuration