This guide covers six types of the navigation menu, contains how-tos for creating all menu types and tips on where to use each of them.
How to add menu items and links
There are two ways to add menu items.
1. Adding menu items and links manually
Set a full link to the page, for example: http://mysite.com/about
Or put in a relative link: /about
You can set a page's URL in the Page Settings:
Do not use the page's internal address that is displayed in the URL bar while you are editing the page:
This is because the page won't load for anyone but you. The link in the menu won't work.
2. Using a helper to add links (URLs)
Hover the mouse pointer over a menu item. You'll see two options for adding a link: Link to Page and Link to Block.
Click on Link to Page to view a list of website pages. Select a page from the list for its URL to be placed automatically.
If you want to add a link to a block on the page, click on Link to Block. You will be taken to the page so you can choose the block you want. Click on the block you want users to be taken to when they click on the menu item. The anchor link will be added automatically.
How to create a menu for all pages
To set up a menu for all pages of your website, create a new page within your project, add a menu block there, and configure it. Then go to the Site Settings → Header and Footer and assign this page as a header. After that, go back to the project dashboard and click on Publish all pages.
To create a navigation menu within a single page, fill out the "Link" fields with block IDs, e.g., #rec2081259. You can find a block ID in the block settings.
If you want to use a custom link, e.g. #link, you can create an anchor link.
To enable smooth scrolling for anchor links, add a T178 block from the "Other" category to the bottom of the page.
How to make a menu for a bilingual website
To make a two-language website, you will have to create two projects (Tilda Business Plan required). You may find it easier to create a website in one language first. After that, you can copy the project and translate it.
To copy a page, go to the Page Settings → Actions → Duplicate page. To move the page to another website, go to the Page Settings → Actions → Move page.
Unfortunately, it is impossible to duplicate the entire website. We are working to make it possible, however.
Set up the header of both projects adding a ME204 menu block or one of these menus: ME301, ME302, ME303, or the hamburger menus: ME401, ME402, ME304. Open the Content panel of the block and add languages and the websites' links.
How to make a second-level menu
There are two ways to make a second-level menu:
Add submenu items to the main menu block
Add a menu block to the page.
Go to the Content panel of the block → Menu Items → Add subitems, then the “plus” icons will appear on the left.
To add a second level, click on the “plus” icon, and add a submenu title and its URL. Click the “+” several times to add the required number of subitems.
Click the “plus” icon to add more submenu items.
Publish the page and see what a second-level menu looks like.
On desktop, a second-level menu is displayed in a drop-down list on mouse hover, on mobile devices it appears when you tap.
Important: The main menu item for which a submenu is used will not be clickable if it contains subitems.
To help your website visitors easily understand which menu items contain second-level menus, select the “Display second level menu icon” checkbox in the Settings → Submenu Settings.
2. Use the ME601/ME601A blocks
Add any menu block to the page—it will be a first-level menu. Then add a ME601 block (Menu: second level).
ME601 allows you to add a submenu for the items in the main menu. It will appear as a drop-down menu when hovered over on desktop or tapped on mobile device.
How it works: 1) In the ME601 block: specify a linkhook, e.g., #submenu:more. 2) In the main menu: add a #submenu:more link in the Content panel of the block → Menu Items as a menu item's link.
Important: the main menu item won't be clickable. If you want to have a link on it, duplicate this item into the drop-down menu.
Note: "More" in "#submenu:more" can be any word, for example: #submenu:portfolio or #submenu:aboutus.
МЕ601 block (Menu: second level)
Main menu block
Explore six website menu designs
Menu design options, customization, tips and examples
How to Improve Your Website Navigation
Practical tips for making a clear and easy to use website