Skip to main content

Background Image

The backgroundImage prop is used to set the background image of the navigation sidebar. To make the background image visible, you also need to provide the backgroundColor prop. The backgroundImage prop accepts a string value that can be a URL or a relative path to the image.

Props​

backgroundImage?: string

Example​

/vertical-menu/vertical-nav/background-image

Source Code​

'use client'

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

const BackgroundImage = () => {
  return (
    <VerticalNav
      customBreakpoint='200px'
      backgroundColor='rgba(248, 248, 248, 0.8)'
      backgroundImage='/images/menu-bg-image.png'
    >
      <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>
  )
}

export default BackgroundImage