Unlayer Documentation

Unlayer Documentation

Welcome to Unlayer Documentation. It takes less than 5 minutes to get our editor up and running on your project.

These guides will take you through the process and get you up and running.

Get Started    

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.

PropertyDefault Value
menu{ items: [] }
fontFamily{ label: 'Arial', value: 'arial,helvetica,sans-serif' }
fontSize14px
textColor#444444
linkColor#0068A5
aligncenter
layouthorizontal
separator
padding5px 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 13 days ago


Menu


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.