How to Create a Website Navigation Menu
Menu design options, customization, tips, and examples
Explore six website menu designs, learn how to customize them, and find out where you can use them.
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:
The navigation menu is a list of links that lead to various pages of your website or specific sections within a particular web page. It helps the website visitors to navigate between the website pages or different sections of a specific page.
General recommendations
>
The menu should help the website visitors find information quickly and easily.
>
The menu should be brief.
>
Keep the number of menu items minimal.
>
Add five or fewer menu items to a navigation bar.
>
Make menu items no longer than one word.
>
It is best if that word is short.
>
Do not overdesign the menu navigation bar as it should not distract the user from the content of your website.
Examples of good menu designs
MENU DESIGN OPTIONS
Transparent Static Menu over the Cover
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.
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%.
Add an ME301 block to the page and apply the following settings:
Main settings → Menu position behavior: Absolute.
Menu background → Menu background opacity: 0%.
Click here to view an example of a transparent static menu on the website
MENU DESIGN OPTIONS
Fixed Menu
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.
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%.
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%.
Click here to view an example of a fixed menu on the website
MENU DESIGN OPTIONS
Menu Fixed on Top of the Page,
Menu That Appears on Scroll
Menu That Appears on Scroll
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.
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 an ME301 block 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 when the page is scrolled down in pixels: 600px.
Menu background → Menu background color. Pick a color.
Menu background → Menu background opacity: 70%.
Add an ME301 block 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 when the page is scrolled down in pixels: 600px.
Menu background → Menu background color. Pick a color.
Menu background → Menu background opacity: 70%.
Click here to view the examples of these menus on a website
MENU DESIGN OPTIONS
Hamburger Menu
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 it's used 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 in the desktop version of your website and make the hamburger menu visible solely on mobile devices.
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 it's used 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 in the desktop version of your website and make the hamburger menu visible solely on mobile devices.
How to set it up:
Add an ME401/402/403/404/405 block to the page, set up the menu position behavior, the menu icon color, and the menu items text color. For example, you may apply the following settings:
Main settings → Menu position behavior: Fixed on scroll.
Menu item → Color. Pick black.
Menu background → Collapsed menu background color. Make it transparent.
Menu background → Expanded menu background color. Pick white.
Add an ME401/402/403/404/405 block to the page, set up the menu position behavior, the menu icon color, and the menu items text color. For example, you may apply the following settings:
Main settings → Menu position behavior: Fixed on scroll.
Menu item → Color. Pick black.
Menu background → Collapsed menu background color. Make it transparent.
Menu background → Expanded menu background color. Pick white.
Click here to view an example of a hamburger menu on the website
MENU DESIGN OPTIONS
Multilevel Menu
What it looks like:
A dropdown menu appears when you click a menu item.
What it's used for:
Large websites with an advanced structure.
A dropdown menu appears when you click a menu item.
What it's used for:
Large websites with an advanced structure.
How to set it up:
Add an ME301 block to the page, set up a menu similar to the described above, then add subitems in the Content panel of the block.
1. Open the Content panel of the block → Menu items → Add subitems.
2. Click the plus icon next to an item, enter a subitem title, and assign a link.
Repeat until all necessary subitems are added.
3. Open the Settings panel of the block → Submenu settings. Select the "Display second level menu icon" checkbox.
Please note that 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.
Add an ME301 block to the page, set up a menu similar to the described above, then add subitems in the Content panel of the block.
1. Open the Content panel of the block → Menu items → Add subitems.
2. Click the plus icon next to an item, enter a subitem title, and assign a link.
Repeat until all necessary subitems are added.
3. Open the Settings panel of the block → Submenu settings. Select the "Display second level menu icon" checkbox.
Please note that 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.
Click here to view an example of a multilevel menu on the website
MENU DESIGN OPTIONS
Tabs
What it looks like:
An active tab allows users to browse content linked to it without leaving the web page.
What it's used for:
Tabs allow you to show several categories of the same type of content such as portfolio works.
An active tab allows users to browse content linked to it without leaving the web page.
What it's used for:
Tabs allow you to show several categories of the same type of content such as portfolio works.
How to set it up:
Add an 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.
Add an 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.
Click here to view an example of this menu on the website
So you have learned about the main menu design options. If you have new ideas and want to share them with someone, 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!
Best of luck with your design experiments!
The website you've been dreaming of, starts right here
