Collapsed + Hover

Warning

Please note that the defaultCollapsed prop is meant for internal use only. It is recommended not to use this prop in your project because the settings configuration will always override the defaultCollapsed prop. If you want to collapse the menu, set the value of layout to collapsed in the src/config/themeConfig.ts file.

The defaultCollapsed prop is used to set the menu to be collapsed by default, and it will expand on hover.

Props

defaultCollapsed?: boolean

Default Value

defaultCollapsed={false}

Example

/vertical-menu/menu-types/collapsed-hover

Source Code

'use client'

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

const CollapsedHover = () => {
  return (
    <VerticalNav customBreakpoint='200px' defaultCollapsed>
      <Menu menuItemStyles={{ button: { paddingBlock: '12px' } }}>
        <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 CollapsedHover