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