Skip to main content

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
Logo

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 w-full', styles.customStyles)}>
      <div className='flex w-full items-center justify-between'>
        <NavToggle />
        {!isBreakpointReached && 'Logo'}
        <HorizontalNav hideMenu switchToVertical verticalNavContent={VerticalNavContent}>
          <Menu>
            <MenuItem>Home</MenuItem>
            <MenuItem component='div'>About</MenuItem>
            <MenuItem>About</MenuItem>
            <MenuItem>Email</MenuItem>
            <MenuItem>Chat</MenuItem>
            <SubMenu label='Authentication'>
              <SubMenu label='Login'>
                <MenuItem>Login v1</MenuItem>
                <MenuItem>Login v2</MenuItem>
              </SubMenu>
            </SubMenu>
            <SubMenu label='Manage Users'>
              <MenuItem>User List</MenuItem>
              <MenuItem>User Details</MenuItem>
            </SubMenu>
          </Menu>
        </HorizontalNav>
      </div>
    </div>
  )
}

export default HorizontalNavbar