Menu
Menu is a built-in tool used to create navigation menus. It is supported in both display modes: email and web pages.
Enable / Disable
Menu tool is enabled by default but you can choose to disable it.
unlayer.init({
tools: {
menu: {
enabled: false
}
}
});
Default Values
Menu tool comes with the following default values. You can choose to change any of these.
| Property | Default Value |
|---|---|
| menu | { items: [] } |
| fontFamily | { label: 'Arial', value: 'arial,helvetica,sans-serif' } |
| fontSize | 14px |
| textColor | #444444 |
| linkColor | #0068A5 |
| align | center |
| layout | horizontal |
| separator | |
| padding | 5px 15px |
Here are a few examples on how to change these default values.
Menu Items
You can set the menu tool to come with default menu items and their URLs pre-filled.
unlayer.init({
tools: {
menu: {
properties: {
menu: {
value: {
items: [
{
key: `${Date.now() + Math.floor(Math.random() * 100)}`, // unique key
text: 'Home Page',
link: {
name: 'web',
values: {
href: 'https://mysite.com',
target: '_self'
},
},
},
{
key: `${Date.now() + Math.floor(Math.random() * 100)}`, // unique key
text: 'About Us',
link: {
name: 'web',
values: {
href: 'https://mysite.com/about-us',
target: '_self'
}
}
}
]
}
}
}
}
}
});
Layout
By default, the layout is set to horizontal but you can change it to vertical.
unlayer.init({
tools: {
menu: {
properties: {
layout: {
value: "vertical"
}
}
}
}
});
Separator
You can add a separator between menu items by default.
unlayer.init({
tools: {
menu: {
properties: {
separator: {
value: "|"
}
}
}
}
});
Padding
unlayer.init({
tools: {
menu: {
properties: {
padding: {
value: "10px"
}
}
}
}
});
Updated 3 months ago