Skip to main content

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​

/vertical-menu/menu-render/menu-with-api

Source Code​

'use client'

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

// Component imports
import VerticalNav, { Menu } from '@menu/vertical-menu'
import { GenerateVerticalMenu } from '@compnoents/GenerateMenu'

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

  useEffect(() => {
    const fetchMenuData = async () => {
      const response = await fetch('https://mocki.io/v1/7eccec25-2c67-4da3-9ab5-02835e1b1d45')
      const data = await response.json()

      setSidebarMenuData(data)
      setIsLoading(false)
    }

    fetchMenuData()
  }, [])

  return (
    <VerticalNav customBreakpoint='200px'>
      <Menu>
        {isLoading ? (
          <div className='p-4'>Loading...</div>
        ) : (
          <Menu>
            <GenerateVerticalMenu menuData={sidebarMenuData} />
          </Menu>
        )}
      </Menu>
    </VerticalNav>
  )
}

export default MenuWithAPI