Menu With API

This example demonstrates how to create a dynamic menu by fetching menu data from an API endpoint. This approach allows you to retrieve menu items from a server or database, making it easy to manage and update the menu content.

Example

/horizontal-menu/menu-render/menu-with-api

Source Code

'use client'

// React imports
import { useEffect, useState } from 'react'

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

// Component Imports
import HorizontalNav, { Menu } from '@menu/horizontal-menu'
import { GenerateHorizontalMenu } from '@compnoents/GenerateMenu'

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

const MenuWithAPI = () => {
  // States
  const [sidebarMenuData, setSidebarMenuData] = useState([])
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    const fetchMenuData = async () => {
      const response = await fetch('https://mocki.io/v1/bed77a1c-baa2-4a06-95f9-ee6423913b71')
      const data = await response.json()

      setSidebarMenuData(data)
      setIsLoading(false)
    }

    fetchMenuData()
  }, [])

  return (
    <div className={classnames('flex items-center plb-2.5 pli-6 w-full', styles.customStyles)}>
      <HorizontalNav>
        <Menu>
          {isLoading ? <div className='p-4'>Loading...</div> : <GenerateHorizontalMenu menuData={sidebarMenuData} />}
        </Menu>
      </HorizontalNav>
    </div>
  )
}

export default MenuWithAPI