Skip to main content

Breakpoints

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 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​

/horizontal-menu/horizontal-nav/breakpoints

Source Code​