Skip to main content

Dynamic Menu

Dynamic menu is created by utilizing data structures such as arrays or objects to represent the menu items and render the data using a loop facilitates. This approach allows you to generate the menu components dynamically based on the data you provide, making it easier to manage and update the menu items programmatically.This allows for greater flexibility in managing the menu content and adapting it to changing requirements.

Props​

export type HorizontalMenuDataType = HorizontalMenuItemDataType | HorizontalSubMenuDataType

export type HorizontalMenuItemDataType = Omit<HorizontalMenuItemProps, 'children'> & { label: ReactNode }
export type HorizontalSubMenuDataType = Omit<HorizontalSubMenuProps, 'children'> & {
  children: HorizontalMenuDataType[]
}

You may refer to the HorizontalMenuItemProps, HorizontalSubMenuProps for more information on the props.

Example​

/horizontal-menu/menu-render/dynamic-menu

Source Code​

'use client'

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

// Type Imports
import type { HorizontalMenuDataType } from '@/types/menuTypes'

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

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

const menuData: HorizontalMenuDataType[] = [
  {
    label: 'Dashboards',
    children: [
      {
        label: 'Analytics'
      },
      {
        label: 'eCommerce'
      }
    ]
  },
  {
    label: 'Calendar'
  },
  {
    label: 'FAQ'
  },
  {
    label: 'Menu Level',
    children: [
      {
        label: 'Menu Level 2.1'
      },
      {
        label: 'Menu Level 2.2',
        children: [
          {
            label: 'Menu Level 3.1'
          },
          {
            label: 'Menu Level 3.2'
          }
        ]
      }
    ]
  },
  {
    label: 'Documentation'
  }
]

const DynamicMenu = () => {
  return (
    <div className={classnames('flex items-center plb-2.5 pli-6 w-full', styles.customStyles)}>
      <HorizontalNav>
        <Menu>
          <GenerateHorizontalMenu menuData={menuData} />
        </Menu>
      </HorizontalNav>
    </div>
  )
}

export default DynamicMenu