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

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