Skip to main content

Backdrop Color

The backdrop color is the background color of the overlay that appears behind the navigation sidebar when it is open. The backdrop color can be changed by setting the backdropColor prop to any valid CSS value for background-color.

Props​

backdropColor?: string
Default Value
backdropColor='rgba(0, 0, 0, 0.3)'

Examples​

/vertical-menu/vertical-nav/backdrop-color

Source Code​

'use client'

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

const BackdropColor = () => {
  return (
    <div className='flex h-dvh bg-indigo-50'>
      <VerticalNav breakpoint='always' backdropColor='rgba(84, 75, 126, 0.5)'>
        <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 BackdropColor