Skip to main content

Collapsed Width

The collapsedWidth prop is used to set the width of the navigation sidebar when it is in the collapsed state. You can set it to a number value, which represents the width in pixels.

Props​

collapsedWidth?: number
Default Value
collapsedWidth={80}

Example​

/vertical-menu/vertical-nav/collapsed-width

Source Code​

'use client'

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

const CollapsedWidth = () => {
  return (
    <VerticalNav customBreakpoint='200px' defaultCollapsed collapsedWidth={120}>
      <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 CollapsedWidth