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 VerticalMenuDataType = VerticalMenuItemDataType | VerticalSubMenuDataType | VerticalSectionDataType

export type VerticalMenuItemDataType = Omit<VerticalMenuItemProps, 'children'> & { label: ReactNode }
export type VerticalSubMenuDataType = Omit<VerticalSubMenuProps, 'children'> & { children: VerticalMenuDataType[] }
export type VerticalSectionDataType = Omit<VerticalMenuSectionProps, 'children'> & {
  isSection: boolean
  children: VerticalMenuDataType[]
}

You may refer to the VerticalMenuItemProps, VerticalSubMenuProps and VerticalMenuSectionProps for more information on the props.

Example​

/vertical-menu/menu-render/dynamic-menu

Source Code​

'use client'

// Component Imports
import VerticalNav, { Menu } from '@menu/vertical-menu'
import { GenerateVerticalMenu } from '@compnoents/GenerateMenu'
import type { VerticalMenuDataType } from '@/types/menuTypes'

const menuData: VerticalMenuDataType[] = [
  {
    label: 'Dashboards & Apps',
    isSection: true,
    children: [
      {
        label: 'Dashboards',
        children: [
          {
            label: 'Analytics'
          },
          {
            label: 'eCommerce'
          }
        ]
      },
      {
        label: 'Calendar'
      }
    ]
  },
  {
    label: 'Others',
    isSection: true,
    children: [
      {
        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 (
    <VerticalNav customBreakpoint='200px'>
      <Menu>
        <GenerateVerticalMenu menuData={menuData} />
      </Menu>
    </VerticalNav>
  )
}

export default DynamicMenu