Skip to main content

Collpased + Popout

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 combination of the defaultCollapsed, popoutCollapsed, and triggerPopout props allows you to create a menu that is initially collapsed, and submenus can pop out when the sidebar is collapsed. Additionally, you can trigger the opening and closing of submenus when the corresponding menu item is hovered over or clicked.

To achieve this behavior, you need to set the following props:

  • defaultCollapsed: true: This prop sets the default state of the menu to be collapsed when the page loads.

  • popoutCollapsed: true: This prop enables the popout behavior for submenus when the sidebar is collapsed. When a submenu item is hovered over or clicked, the submenu will pop out and display its content.

  • triggerPopout: 'hover' | 'click': This prop determines how the submenu is triggered to open or close. When set to hover, the submenu will pop out when the corresponding menu item is hovered over. When set to click, the submenu will pop out when the menu item is clicked.

Props​

defaultCollapsed?: boolean
popoutWhenCollapsed?: boolean
triggerPopout?: 'hover' | 'click'

Example​

/vertical-menu/menu-types/collapsed-popout

Source Code​

'use client'

// React Imports
import { useState } from 'react'
import type { ChangeEvent } from 'react'

// MUI Imports
import Radio from '@mui/material/Radio'
import RadioGroup from '@mui/material/RadioGroup'
import FormControlLabel from '@mui/material/FormControlLabel'

// Type Imports
import type { MenuProps } from '@menu/vertical-menu'

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

const CollapsedPopout = () => {
  // States
  const [trigger, setTrigger] = useState<MenuProps['triggerPopout']>('hover')

  const handleTriggerChange = (event: ChangeEvent<HTMLInputElement>) => {
    setTrigger(event.target.value as MenuProps['triggerPopout'])
  }

  return (
    <div className='flex'>
      <VerticalNav customBreakpoint='200px' defaultCollapsed>
        <Menu popoutWhenCollapsed>
          <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'>
        <RadioGroup row value={trigger} onChange={handleTriggerChange}>
          <FormControlLabel value='hover' control={<Radio />} label='Hover' />
          <FormControlLabel value='click' control={<Radio />} label='Click' />
        </RadioGroup>
      </main>
    </div>
  )
}

export default CollapsedPopout