In the editor, the designer can build custom menus. To use these menus in a widget, use the useMenu hook.

Usage

const menuChildren: IMenu = useMenu(menuKey?: string);
//if no menu key is defined, the primary menu will be used.

Relevant interfaces

interface IMenu {
  title: string;
  children: IMenuItem[];
}

interface IMenuItem {
  key: string;
  title: string;
  link: IPageLink | IPhoneLink | IEmailLink | IExternalLink | IWidgetLink;
  children?: IMenuItem[];
}

Example

Create a simple menu.

import { useMenu, IMenuItems, Link } from 'vev';

export default function () {
  const { children } = useMenu();
  return (
    <ul> 
      {children.map((item, index) => (
        <Menu key={i} item={item} />
      ))} 
    </ul>
  );
}

function Menu({item} : {item: IMenuItems}) {
  const { title, link, children = [] } = item;
  return (
    <li>
      <Link to={link}>{title}</Link>
      {children.length>0 && (
        <ul>
          {children.map((item, index) => (
            <Menu key={index} item={item} />
          ))}
        </ul>
      )}
    </li>
  );
}