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