Skip to main content

Sub Menu Open Behavior

The subMenuOpenBehavior prop allows you to control how submenus behave when opened. It provides two options for controlling the behavior of submenus: accordion and collapse.

BehaviorDescription
accordionOnly one submenu can be open at a time. When a submenu is opened, any other open submenus will automatically close.
collapseMultiple submenus can be open simultaneously. Each submenu operates independently, and opening one submenu does not affect others.

Props​

subMenuOpenBehavior?: 'accordion' | 'collapse'
Default Value
subMenuOpenBehavior='accordion'

Example​

/vertical-menu/menu/sub-menu-open-behavior

Source Code​

'use client'

// React import
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/components/vertical-menu/Menu'

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

const SubMenuOpenBehavior = () => {
  // States
  const [openBehavior, setOpenBehavior] = useState<MenuProps['subMenuOpenBehavior']>('accordion')

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

  return (
    <div className='flex'>
      <VerticalNav customBreakpoint='200px'>
        <Menu>
          <MenuSection label='Dashboards & Apps'>
            <SubMenu label='Dashboards'>
              <MenuItem>Analytics</MenuItem>
              <MenuItem>eCommerce</MenuItem>
            </SubMenu>
            <MenuItem>Calendar</MenuItem>
          </MenuSection>
          <MenuSection label='Others'>
            <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>
          </MenuSection>
        </Menu>
      </VerticalNav>
      <main className='p-4 flex-grow'>
        <RadioGroup row value={openBehavior} onChange={handleTriggerChange}>
          <FormControlLabel value='accordion' control={<Radio />} label='Accordion' />
          <FormControlLabel value='collapse' control={<Radio />} label='Collapse' />
        </RadioGroup>
      </main>
    </div>
  )
}

export default SubMenuOpenBehavior