Skip to main content

Switch To Vertical

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 "Switch To Vertical" feature allows you to switch the navigation menu from horizontal to vertical mode. To enable the vertical navigation menu mode, you can use the switchToVertical prop. You need to provide the content for the vertical navigation menu using the verticalNavContent prop. This prop allows you to specify the components or data that will be rendered within the vertical menu.

By using the switchToVertical and verticalNavContent props, you can easily switch between horizontal and vertical menu layouts and provide a flexible and responsive menu design for your application.

Props​

switchToVertical?: boolean
verticalNavContent?: ({ children }: ChildrenType) => JSX.Element
Default Value
switchToVertical={false}

Example​

/horizontal-menu/horizontal-nav/switch-to-vertical

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 SwitchToVertical = () => {
  return (
    <div className={classnames('flex items-center plb-2.5 pli-6 w-full', styles.customStyles)}>
      <NavToggle />
      <HorizontalNav switchToVertical breakpoint='md' verticalNavContent={VerticalNavContent}>
        <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 SwitchToVertical