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>
);
}

Did this answer your question?