How To Set Up a Website Menu

Read this guide to find out more about menu design, how it works, and what it looks like:

This guide covers seven types of the navigation menu, contains how-tos for creating all menu types and tips on where to use each of them.

There are two ways to add menu items.

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:

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.

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 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.

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.

There are two ways to make a second-level menu:

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.

On desktop, a second-level menu is displayed in a drop-down list on mouse hover, on mobile devices it appears when you tap.

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.

To configure the block fixation, open Zero Block → Settings → under "Position and Overflow," select "Fixed" to lock the block.

The block can be fixed at the top or bottom of the page and can be set to appear after X pixels (Appear Offset). In this case, you can customize one of two variants of appearance animation - Fade In or Slide Up/Down. This can be useful, for example, if you want the website header to appear not at once, but rather after some scrolling.

Read about other menu types, discover how to make a fixed menu that will be visible when scrolling, how to add two menus to a page, how to make tabs, and more in our article "Explore seven website menu designs."