Skip to main content

Full Menu Scroll

Browser scroll​

The browser scroll is the default scroll behavior for the vertical menu. When the menu items exceed the available vertical space, the browser's built-in scrollbar is used to scroll through the menu content. This scroll behavior is automatically enabled without any additional configuration.

Example​

/vertical-menu/menu-scroll/full/browser-scroll

Source Code​

'use client'

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

const FullMenuBrowserScroll = () => {
  return (
    <VerticalNav customBreakpoint='200px'>
      <Menu>
        <MenuSection label='Dashboards'>
          <SubMenu label='Dashboards'>
            <MenuItem>Analytics</MenuItem>
            <MenuItem>eCommerce</MenuItem>
          </SubMenu>
        </MenuSection>
        <MenuSection label='Apps'>
          <MenuItem>Email</MenuItem>
          <MenuItem>Chats</MenuItem>
          <MenuItem>Calendar</MenuItem>
          <MenuItem>Invoice</MenuItem>
          <SubMenu label='User'>
            <MenuItem>List</MenuItem>
            <SubMenu label='View'>
              <MenuItem>Account</MenuItem>
              <MenuItem>Security</MenuItem>
              <MenuItem>Billings & Plans</MenuItem>
              <MenuItem>Notifications</MenuItem>
              <MenuItem>Connection</MenuItem>
            </SubMenu>
          </SubMenu>
        </MenuSection>
        <MenuSection label='Pages'>
          <MenuItem>FAQ</MenuItem>
          <MenuItem>Help Center</MenuItem>
          <SubMenu label='Auth Pages'>
            <MenuItem>Login</MenuItem>
            <MenuItem>Register</MenuItem>
            <MenuItem>Forgot Password</MenuItem>
          </SubMenu>
        </MenuSection>
        <MenuSection label='User Interface'>
          <MenuItem>Typography</MenuItem>
          <MenuItem>Icons</MenuItem>
          <MenuItem>Cards</MenuItem>
        </MenuSection>
        <MenuSection label='Others'>
          <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>
  )
}

export default FullMenuBrowserScroll

PerfectScrollBar​

The perfect scrollbar is a custom scrollbar implementation that provides a more customizable and visually appealing scrolling experience for the vertical menu.

You need to import the PerfectScrollbar component and wrap the menu component with it. Also import the associated CSS styles into the file where you want to use the perfect scrollbar. To import the CSS styles, you can use the following import statement:

import 'react-perfect-scrollbar/dist/css/styles.css'

This will replace the default browser scrollbar with the custom perfect scrollbar.

Example​

/vertical-menu/menu-scroll/full/perfect-scroll

Source Code​

'use client'

// Third-party Imports
import PerfectScrollbar from 'react-perfect-scrollbar'
import 'react-perfect-scrollbar/dist/css/styles.css'

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

const FullMenuPerfectScroll = () => {
  return (
    <VerticalNav customBreakpoint='200px'>
      <PerfectScrollbar options={{ wheelPropagation: false, suppressScrollX: true }}>
        <Menu>
          <MenuSection label='Dashboards'>
            <SubMenu label='Dashboards'>
              <MenuItem>Analytics</MenuItem>
              <MenuItem>eCommerce</MenuItem>
            </SubMenu>
          </MenuSection>
          <MenuSection label='Apps'>
            <MenuItem>Email</MenuItem>
            <MenuItem>Chats</MenuItem>
            <MenuItem>Calendar</MenuItem>
            <MenuItem>Invoice</MenuItem>
            <SubMenu label='User'>
              <MenuItem>List</MenuItem>
              <SubMenu label='View'>
                <MenuItem>Account</MenuItem>
                <MenuItem>Security</MenuItem>
                <MenuItem>Billings & Plans</MenuItem>
                <MenuItem>Notifications</MenuItem>
                <MenuItem>Connection</MenuItem>
              </SubMenu>
            </SubMenu>
          </MenuSection>
          <MenuSection label='Pages'>
            <MenuItem>FAQ</MenuItem>
            <MenuItem>Help Center</MenuItem>
            <SubMenu label='Auth Pages'>
              <MenuItem>Login</MenuItem>
              <MenuItem>Register</MenuItem>
              <MenuItem>Forgot Password</MenuItem>
            </SubMenu>
          </MenuSection>
          <MenuSection label='User Interface'>
            <MenuItem>Typography</MenuItem>
            <MenuItem>Icons</MenuItem>
            <MenuItem>Cards</MenuItem>
          </MenuSection>
          <MenuSection label='Others'>
            <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>
      </PerfectScrollbar>
    </VerticalNav>
  )
}

export default FullMenuPerfectScroll