Horizontal Menu In Horizontal Navbar

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 following example demonstrates the rendering of a horizontal menu within a horizontal navbar. This is just an example, showcasing how a horizontal menu can be rendered in any desired location within a template. This example is commonly utilized for presenting a horizontal menu to users.

Example

/horizontal-menu/menu-position/horizontal-navbar

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'

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

// Style Imports
import styles from '../../styles.module.css'

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

  return (
    <div className={classnames('flex items-center plb-2.5 pli-6 is-full', styles.customStyles)}>
      <div className='flex is-full items-center justify-between'>
        <NavToggle />
        {!isBreakpointReached && 'Logo'}
        <HorizontalNav hideMenu switchToVertical verticalNavContent={VerticalNavContent}>
          <Menu menuItemStyles={{ button: { paddingBlock: '12px' } }}>
            <MenuItem>Home</MenuItem>
            <MenuItem component='div'>About</MenuItem>
            <MenuItem href='/about'>About</MenuItem>
            <MenuItem href='/email'>Email</MenuItem>
            <MenuItem href='/chat'>Chat</MenuItem>
            <SubMenu label='Authentication'>
              <SubMenu label='Login'>
                <MenuItem href='/login-v1'>Login v1</MenuItem>
                <MenuItem href='/login-v2'>Login v2</MenuItem>
              </SubMenu>
            </SubMenu>
            <SubMenu label='Manage Users'>
              <MenuItem href='/user-list'>User List</MenuItem>
              <MenuItem href='/user-details'>User Details</MenuItem>
            </SubMenu>
          </Menu>
        </HorizontalNav>
      </div>
    </div>
  )
}

export default HorizontalNavbar