Skip to main content

Breakpoint

warning

Please note that the VerticalNavContent used in this example is only for documentation purposes. If you want to use it in your own component, please import it from src/components/layout/horizontal/VerticalNavContent.tsx and use it accordingly.

The breakpoint prop is used to determine when the navigation menu should trigger responsive behavior. The responsive behavior typically involves hiding the navigation menu and showing a hamburger menu button instead. When the hamburger menu button is clicked, the navigation menu is shown as an overlay. The default value for the breakpoint prop is lg, which means that the navigation menu will be hidden when the screen size is less than 1200px. The breakpoint prop can be set to always to always show the hamburger menu button, regardless of the screen size.

Props​

breakpoint? : 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'always'
Default Value
breakpoint='lg'
ValueDescription
xs< 480px
sm< 600px
md< 900px
lg< 1200px
xl< 1536px
xxl< 1920px
alwaysHorizontal navigation is always in the collapsed state, regardless of the screen size

Example​

/horizontal-menu/horizontal-nav/breakpoint

Source Code​

'use client'

// Third-party Imports
import classnames from 'classnames'

// Component Imports
import NavToggle from '@components/layout/horizontal/NavToggle'
import HorizontalNav, { Menu, MenuItem, SubMenu } from '@menu/horizontal-menu'
import VerticalNavContent from '../VerticalNavContent'

// Styled Component Imports
import styles from '../styles.module.css'

const BreakPoint = () => {
  return (
    <div className={classnames('flex items-center plb-2.5 pli-6 w-full', styles.customStyles)}>
      <NavToggle />
      <HorizontalNav switchToVertical breakpoint='md' verticalNavContent={VerticalNavContent}>
        <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>
      </HorizontalNav>
    </div>
  )
}

export default BreakPoint