Skip to main content

Vertical Menu Props

warning

Please note that the VerticalNavContent used in this example is only for documentation purposes. If you want to use it in your own component, please import it from src/components/layout/horizontal/VerticalNavContent.tsx and use it accordingly.

The vertical-menu-props prop is used to change the appearance of the vertical navigation menu when breakpoint is reached.

Props​

verticalMenuProps?: Pick<
    VerticalMenuProps,
    | 'transitionDuration'
    | 'menuSectionStyles'
    | 'menuItemStyles'
    | 'subMenuOpenBehavior'
    | 'renderExpandIcon'
    | 'renderExpandedMenuItemIcon'
    | 'textTruncate'
    | 'rootStyles'
  >

Example​

/horizontal-menu/menu/vertical-menu-props

Source Code​

'use client'

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

// Component Imports
import NavToggle from '@components/layout/horizontal/NavToggle'
import HorizontalNav, { Menu, MenuItem, SubMenu } from '@menu/horizontal-menu'
import VerticalNavContent from '../VerticalNavContent'

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

const VerticalMenuProps = () => {
  return (
    <div className={classnames('flex items-center plb-2.5 pli-6 w-full', styles.customStyles)}>
      <NavToggle />
      <HorizontalNav switchToVertical breakpoint='md' verticalNavContent={VerticalNavContent}>
        <Menu
          verticalMenuProps={{
            menuItemStyles: { label: { color: '#1058e9' } },
            menuSectionStyles: { label: { color: '#ec0e0e' } },
            renderExpandedMenuItemIcon: { icon: <>🥶</> },
            renderExpandIcon: ({ open }) => <>{open ? '🔥' : '💧'}</>,
            rootStyles: { paddingBlock: '12px' },
            subMenuOpenBehavior: 'accordion',
            textTruncate: true,
            transitionDuration: 500
          }}
        >
          <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 VerticalMenuProps