Skip to main content

Breakpoints

The breakpoints prop is used to override the default breakpoints by providing your own custom object. Users can pass in an object that only includes specific breakpoints they want to customize, while the rest will be the default values. You can also override all the breakpoints by passing in an object with all the breakpoints.

Props​

breakpoints?: {
  xs?: string
  sm?: string
  md?: string
  lg?: string
  xl?: string
  xxl?: string
  always?: string
}
Default Value
breakpoints = {
  xs='480px'
  sm='600px'
  md='900px'
  lg='1200px'
  xl='1536px'
  xxl='1920px'
  always='always'
}

Example​

/vertical-menu/vertical-nav/breakpoints

Source Code​

'use client'

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

const Breakpoints = () => {
  return (
    <div className='flex'>
      <VerticalNav breakpoints={{ lg: '1000px' }}>
        <Menu>
          <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'>
        <NavToggle />
      </main>
    </div>
  )
}

export default Breakpoints