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​