Vev Help Center
Search…
useMenu hook
In the editor, the designer can build custom menus. To use these menus in a widget, use the useMenu hook.

Usage

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

Relevant interfaces

1
interface IMenu {
2
title: string;
3
children: IMenuItem[];
4
}
5
​
6
interface IMenuItem {
7
key: string;
8
title: string;
9
link: IPageLink | IPhoneLink | IEmailLink | IExternalLink | IWidgetLink;
10
children?: IMenuItem[];
11
}
Copied!

Example

Create a simple menu.
1
import { useMenu, IMenuItems, Link } from 'vev';
2
​
3
export default function () {
4
const { children } = useMenu();
5
return (
6
<ul>
7
{children.map((item, index) => (
8
<Menu key={i} item={item} />
9
))}
10
</ul>
11
);
12
}
13
​
14
function Menu({item} : {item: IMenuItems}) {
15
const { title, link, children = [] } = item;
16
return (
17
<li>
18
<Link to={link}>{title}</Link>
19
{children.length>0 && (
20
<ul>
21
{children.map((item, index) => (
22
<Menu key={index} item={item} />
23
))}
24
</ul>
25
)}
26
</li>
27
);
28
}
Copied!