Skip to main content

Overlay Menu

The overlay menu is a navigation sidebar that slides in from the left side of the screen. It is a full screen menu that covers the entire page along with a backdrop. The backdrop is a semi-transparent layer that covers the entire page and prevents the user from interacting with the page while the menu is open. The backdrop is also clickable and will close the menu when clicked. This is a great option for mobile devices. To make the overlay menu visible on all screen sizes, you can set the breakpoint prop to always.

Example​

/vertical-menu/vertical-nav/overlay

Source Code​

'use client'

// Component Imports
import NavToggle from '@components/layout/vertical/NavToggle'
import VerticalNav, { Menu, MenuItem, SubMenu } from '@menu/vertical-menu'

const Overlay = () => {
  return (
    <div className='flex h-full'>
      <VerticalNav breakpoint='always'>
        <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'>
        <NavToggle />
      </main>
    </div>
  )
}

export default Overlay