How to Design a Website Menu

This guide focuses on the menu design—what the menu looks like and how it works. If you want to learn how to design a website menu, display it on every page of your website, or create a navigation menu for a particular web page, we recommend that you read another guide:

What it looks like:
Such a menu is pinned at the top of the page not to distract the website visitors from the content, and they can easily find it when necessary as it is fixed in a specific place on the page.

How to set it up:

Add an ME301 block to the page and apply the following settings:

Main settings → Menu position behavior: Absolute.
Menu background → Menu background opacity: 0%.

What it looks like:
Such a menu is always visible on the page and can easily be accessed from any place on the page. It usually has a transparent background at the top of the page (on the cover) that turns opaque on scroll.

How to set it up:

Add an ME301 block to the page and apply the following settings:

Main settings → Menu position behavior: Fixed on scroll.
Menu background → Menu background color. Pick a color.
Menu background → Menu background opacity: 0%.
Menu background → Menu background opacity on scroll: 80%.

What it looks like:
This menu is similar to the one described above. What makes it different is another menu appearing on scroll and featuring even more items. For example, the top navigation menu contains a logo, a few menu items leading to different website pages, and some social media links. When the user scrolls the page, another menu bar appears, featuring a logo, a call to action, and a callback button.

How to set it up:
Add two ME301 blocks to the page and apply the following settings:

Menu One (located on top of the page)
Main settings → Menu position behavior: Absolute.
Menu background → Menu background opacity: 0%.

Menu Two (appearing on scroll)
Main settings → Menu position behavior: Fixed on scroll.
Main settings → Reveal menu after scrolling N pixels
Reveal menu when the page is scrolled down in pixels: 600px.
Menu background → Menu background color. Pick a color.
Menu background → Menu background opacity: 70%.

What it looks like:
The hamburger menu is the three horizontal lines at the top of the screen. When the user clicks it, it opens to reveal a navigation menu.

What you can use it for:
Such a menu is perfect for your website if you want the visitors to focus on the content without being distracted by other design elements. The hamburger menu is usually used in a mobile version of the website. You can set up how the menu appears on different devices.

For example, you may opt for a regular menu to appear only on the desktop version of your website and make the hamburger menu visible solely on mobile devices.

How to set it up:
Add a ME401/402/403/404/405 block to the page, set up the menu position behavior, the menu icon color, the menu background color, and the menu items background color.

For example, you may apply the following settings:
Main settings → Menu position behavior: Fixed on scroll.
Menu icon → Color. Pick black.
Menu background → Collapsed menu background color. Make it transparent.
Menu background → Expanded menu background color. Pick white.

How to set it up:

Add submenu items for the main block or use a combination of ME301 menu (or any other block with menu items) and ME601.

Main block submenu items

Add any menu block that contains menu items to the page.

Go to the Content tab of the block → List of menu items → Add subitems, and you will see the plus icons that will appear near the menu items.

Click the plus icon near an item that you need to add a subitem for, enter a subitem title, and assign a link.

Click the plus icon again to add a new subitem.

Menu subitems will be displayed on hover as a dropdown menu. In mobile versions, you can open the menu with a tap.

Important: the main menu item itself will not be clickable. If you want to make it clickable, create a duplicate subitem in the drop-down menu.

ME 601 block

Add the ME301 block to the page, configure the menu as described above, and add the ME601 block (Menu: second level).

The ME601 block allows you to add subitems to the main menu items. They will be displayed on hover as a dropdown menu. In mobile versions, you can open the menu with a tap.

How it works:
1) In the ME601 block, write a link that looks like #submenu:more
2) In the main menu: In the Link field, near the item you want to create subitems for, write #submenu:more.

Important: main menu item itself will not be clickable. If you want to make it clickable, create a duplicate subitem in the drop-down menu.

Please note: you can use any word for "#submenu:more", such as: #submenu:portfolio или #submenu:aboutus

What it looks like:
An active tab allows users to browse content linked to it without leaving the web page.

What you can use it for:
Tabs allow you to show several categories of the same type of content such as different categories of works within a portfolio.

How to set it up:
Add a ME602 or ME603 block to the page. You can use these blocks to create tabs and show content when the user clicks a tab within the same page. Below, you need to add blocks in a sequence that will change when the user clicks a particular tab.

How it works:
1. Add tab titles in the Content panel of the ME602 or ME603 block.
2. Add the blocks' IDs that should be visible when you click the tab (separate them with a comma, no space).

Note: You can copy the block's ID in the Settings panel of the block — scroll down to the bottom of the panel to find it.

What it looks like:
By clicking the dot in the menu, you jump to a specific block on the page

What you can use it for:
For redirecting users to a specific section on the page with large amount of content

What it looks like:
Dropdown sidebar menu that contains sections and subsections. The menu has a fixed position that allows you to address it from any place on the page.

What you can use it for:
It allows you to create detailed navigation for website internal sections and subsections, as well as add search for pages.

How to set it up:

Add the ME901 block to the page, configure the styles of how the menu should be displayed by using the block settings.

The ME901 block allows you to add subsections to the main menu items. You need to specify the links to subsections in the Content tab of block > List of menu items.

As a link, you need to specify either the full address of the page including http:// or relative address — just the name of the page (such as /page7890.html или /about).

To create the navigation within the page, you can use anchor links (such as #contacts). To add an anchor to the page, use the Anchor link block from the Other category.

The menu stays open if the screen width is more than 1500 px.

How to set it up:
Add the ME401 block to the page → Content tab → Cart, Search, And Favorites → select the checkboxes to show the icons you need in the menu.

Select the "Don't show native widget buttons" checkbox to display the icons only in the menu.

Then add the shopping cart block ST100, the search widget block T985, and the Favorites block ST110 and publish the page.

Done.

This feature works for all menu blocks numbered ME4XX.

Display options:
If you want to show both icons and the Favorites widget button in the menu, uncheck the "Don't show native widget buttons" in the ME401 block's Content tab.

You can hide the widget icon for the blocks ST100 Shopping cart and T985 Search—in the "More settings" tab in the block Settings, select the "Don't show widget button" checkbox. Publish the page.

Done! Three icons are displayed in the menu and there is a separate widget for Favorites. You can configure visibility for the shopping cart or search widget similarly.

You can create your own menu in Zero Block by configuring the elements as you like it and and then fixing the block.

To fix it, go to editing the Zero Block Settings → Position and Overflow→ select the Fixed value to fix the block.

You can fix the block at the top or at the bottom of the page, as well as configure it so that it appears in X px (Appear Offset). In this case, you can select an option for animation appearance — Fade in. This can be useful, for example, if you want that the website header appears in a few scrolls and not at once.

Here are some key menu design options. If you have new ideas and want to share them, please email the link to your website to team@tilda.cc with the "Menu design" in the subject line. Thank you!

Best of luck with your design experiments!