Skip to main content

Hide Menu

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 hidemenu props can be used to hide the navigation menu when breakpoint size is reached during window resize. This props is only applicable to horizontal navigation menu. When the breakpoint is reached, the horizontal navigation menu will be hidden, and a hamburger icon will be displayed. Clicking on the hamburger icon will display the vertical menu sidebar.

For implementing this functionality, You need to pass the hidemenu prop to the horizontal navigation menu component. Also you need to pass the switchToVertical and verticalNavContent props to the other horizontal navigation menu components. The switchToVertical prop will be used to switch to vertical menu when the hamburger icon is clicked. The verticalNavContent prop will be used to display the vertical navigation sidebar.

Example​

/horizontal-menu/horizontal-nav/hide-menu

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 HideMenu = () => {
  return (
    <div className='flex flex-col w-full'>
      <div className={classnames('flex items-center plb-2.5 pli-6 w-full', styles.customStyles)}>
        <NavToggle />
        <HorizontalNav hideMenu breakpoint='md'>
          <Menu>
            <MenuItem>Home</MenuItem>
            <MenuItem>About</MenuItem>
            <MenuItem>Contact Us</MenuItem>
          </Menu>
        </HorizontalNav>
      </div>
      <HorizontalNav
        breakpoint='md'
        verticalNavContent={VerticalNavContent}
        switchToVertical
        customStyles={{ padding: '10px 24px', borderBottom: '1px solid var(--mui-palette-divider)' }}
      >
        <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 HideMenu