Skip to main content

useHorizontalNav

Overview​

The useHorizontalNav() hook is a custom hook specifically designed to handle the functionality of a navigation menu within a web application. Its purpose is to provide a comprehensive variable that can be utilized to customize the behavior of the navigation menu. This documentation has explained how to use the hook and described variables for configuring and customizing the navigation menu.

Values​

The useHorizontalNav() hook provides the following variable that can be used to customize the behavior of the navigation menu:

ValueTypeDescription
isBreakpointReachedbooleanA boolean value that indicates whether the breakpoint has been reached.
updateIsBreakpointReached(isBreakpointReached: boolean) => voidA function used to update isBreakpointReached value.

Usage​

To utilize the useHorizontalNav() hook, please refer to the example provided below:

isBreakpointReached​

/use-horizontal-nav/is-breakpoint-reached

Source Code​

'use client'

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

// Hook Imports
import useHorizontalNav from '@menu/hooks/useHorizontalNav'

const IsBreakpointReached = () => {
  // Hooks
  const { isBreakpointReached } = useHorizontalNav()

  return (
    <div className='flex'>
      <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>
      <main className='p-4 flex-grow'>{isBreakpointReached && <NavToggle />}</main>
    </div>
  )
}

export default IsBreakpointReached

updateIsBreakpointReached​

/use-horizontal-nav/updated-is-breakpoint-reached

Example screen size is larger than 800px

Source Code​

'use client'

// React Imports
import { useEffect } from 'react'

// Hook Imports
import useHorizontalNav from '@menu/hooks/useHorizontalNav'
import useMediaQuery from '@menu/hooks/useMediaQuery'

const UpdateIsBreakpointReached = () => {
  // Hooks
  const { isBreakpointReached, updateIsBreakpointReached } = useHorizontalNav()

  const isSmallerThan800 = useMediaQuery('800px')

  // Set the breakpointReached value in the state
  useEffect(() => {
    updateIsBreakpointReached(isSmallerThan800)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isSmallerThan800])

  return (
    <main className='p-4 flex-grow'>
      <p>
        {isBreakpointReached ? 'Example screen size is smaller than 800px' : 'Example screen size is larger than 800px'}
      </p>
    </main>
  )
}

export default UpdateIsBreakpointReached