Skip to main content

Popout Scroll

This feature is specifically designed for a collapsed navigation sidebar where the menu items exceed the available vertical space, requiring scrolling functionality. The popout scroll feature allows you to scroll through the menu items when the menu is collapsed.

The popoutWhenCollapsed prop controls the behavior of the navigation sidebar when it is collapsed. It enables the popout functionality, allowing the menu items to be displayed in a popout menu when the available space is insufficient.

The triggerPopout prop specifies the event that triggers the popout menu. It can be set to either "hover" or "click" to define how the popout menu is triggered.

Browser scroll​

The browserScroll prop is used to enable or disable the use of the browser's default scroll bar.

Props​

browserScroll?: boolean
Default Value
browserScroll={false}

Example​

/vertical-menu/menu-scroll/popout/browser-scroll

Source Code​

'use client'

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

const PopoutBrowserScroll = () => {
  return (
    <VerticalNav customBreakpoint='200px' defaultCollapsed>
      <Menu triggerPopout='hover' popoutWhenCollapsed browserScroll>
        <SubMenu label='Dashboards'>
          <MenuItem>Analytics</MenuItem>
          <MenuItem>eCommerce</MenuItem>
        </SubMenu>
        <SubMenu label='Apps'>
          <MenuItem>Email</MenuItem>
          <MenuItem>Chats</MenuItem>
          <MenuItem>Calendar</MenuItem>
          <MenuItem>Invoice</MenuItem>
          <MenuItem>List</MenuItem>
          <MenuItem>Profile</MenuItem>
          <MenuItem>Teams</MenuItem>
          <MenuItem>Projects</MenuItem>
          <MenuItem>Account</MenuItem>
          <MenuItem>Security</MenuItem>
          <MenuItem>Billings & Plans</MenuItem>
          <MenuItem>Notifications</MenuItem>
          <MenuItem>Connection</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 PopoutBrowserScroll

Perfect Scroll​

The perfect scroll is the default scroll behavior for the vertical popout menu. When the menu items exceed the available vertical space, the perfect scrollbar is used to scroll through the menu content. This scroll behavior is automatically enabled without any additional configuration.

Example​

/vertical-menu/menu-scroll/popout/perfect-scroll

Source Code​

'use client'

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

const PopoutPerfectScroll = () => {
  return (
    <VerticalNav customBreakpoint='200px' defaultCollapsed>
      <Menu triggerPopout='hover' popoutWhenCollapsed>
        <SubMenu label='Dashboards'>
          <MenuItem>Analytics</MenuItem>
          <MenuItem>eCommerce</MenuItem>
        </SubMenu>
        <SubMenu label='Apps'>
          <MenuItem>Email</MenuItem>
          <MenuItem>Chats</MenuItem>
          <MenuItem>Calendar</MenuItem>
          <MenuItem>Invoice</MenuItem>
          <MenuItem>List</MenuItem>
          <MenuItem>Profile</MenuItem>
          <MenuItem>Teams</MenuItem>
          <MenuItem>Projects</MenuItem>
          <MenuItem>Account</MenuItem>
          <MenuItem>Security</MenuItem>
          <MenuItem>Billings & Plans</MenuItem>
          <MenuItem>Notifications</MenuItem>
          <MenuItem>Connection</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 PopoutPerfectScroll