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 when you should use them.
If you want to learn how to design a website menu, display it on every page of your site or create navigation inside a webpage, this guide is for you.
A navigation menu is a set of links that lead to other pages of a website or specific sections within a web page. It is essential for navigating between pages of a website or between sections of one page.
General recommendations
>
The menu must help visitors find information quickly and easily.
>
The menu must be brief.
>
Keep menu items to a minimum.
>
Use five or fewer menu items in a navigation bar.
>
Keep menu items to a single word.
>
It's best if that word is short.
>
Don't overdesign your menu navigation bar as it should not distract the user from your website content.
Examples of good menu design
MENU DESIGN OPTIONS
Transparent static menu over the cover
What it does:
This menu always sits at the top of the page, which makes it very easy for the user to find it as it remains in its fixed place.
This menu always sits at the top of the page, which makes it very easy for the user to find it as it remains in its fixed place.
How to set it up:
Add block ME301 to your web page and use the following settings:
Main settings > Menu position behavior — Absolute
Menu background > Menu background opacity — 0%
Add block ME301 to your web page and use the following settings:
Main settings > Menu position behavior — Absolute
Menu background > Menu background opacity — 0%
View this page in the browser window
MENU DESIGN OPTIONS
Fixed menu
What it does:
This menu always sits within the user's sight, and she can refer to it regardless of where she is on the page. This menu usually has a transparent background at the start of the page (on the cover) which changes to opaque on scroll.
This menu always sits within the user's sight, and she can refer to it regardless of where she is on the page. This menu usually has a transparent background at the start of the page (on the cover) which changes to opaque on scroll.
How to set it up:
Add block ME301 to your web page and use the following settings:
Main settings > Menu position behavior — Fixed
Menu background > Menu background color — Choose one
Menu background > Menu background opacity — 0%
Menu background > Menu background opacity after scrolling — 80%
Add block ME301 to your web page and use the following settings:
Main settings > Menu position behavior — Fixed
Menu background > Menu background color — Choose one
Menu background > Menu background opacity — 0%
Menu background > Menu background opacity after scrolling — 80%
View this page in the browser window
MENU DESIGN OPTIONS
Menu fixed on top of the page,
menu that appears on scroll
menu that appears on scroll
What it does:
This design of this menu is similar to the one describe above, the difference being is that an additional menu with extra items appears on scroll. For example, a top navigation bar is home to a logo, menu items (with links going to different sections of the website) and social media links. However, when the user begins to scroll the page, a menu bar containing the menu with a logo, a call-to-action and a call back button appears and remains in view.
This design of this menu is similar to the one describe above, the difference being is that an additional menu with extra items appears on scroll. For example, a top navigation bar is home to a logo, menu items (with links going to different sections of the website) and social media links. However, when the user begins to scroll the page, a menu bar containing the menu with a logo, a call-to-action and a call back button appears and remains in view.
How to set it up:
Add block ME301 to your web page and use the following settings:
First menu (remains visible on the cover page)
Main settings > Menu position behavior — Absolute
Menu background > Menu background opacity — 0%
Second menu (appears on scroll)
Main settings > Menu position behavior — Fixed
Main settings > Menu scroll appear offset — 600px
Menu background > Menu background color — Choose from a selection
Menu background > Menu background opacity — 70%
Add block ME301 to your web page and use the following settings:
First menu (remains visible on the cover page)
Main settings > Menu position behavior — Absolute
Menu background > Menu background opacity — 0%
Second menu (appears on scroll)
Main settings > Menu position behavior — Fixed
Main settings > Menu scroll appear offset — 600px
Menu background > Menu background color — Choose from a selection
Menu background > Menu background opacity — 70%
MENU DESIGN OPTIONS
Hamburger menu
How it works:
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:
Use it when you want the user to focus on your content without being distracted by other design elements. The hamburger menu is usually used in mobile versions of a website. For example, you may set up the menu view for various devices: for example, a regular menu can only appear on computer screens, while the hamburger menu will be 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:
Use it when you want the user to focus on your content without being distracted by other design elements. The hamburger menu is usually used in mobile versions of a website. For example, you may set up the menu view for various devices: for example, a regular menu can only appear on computer screens, while the hamburger menu will be visible solely on mobile devices.
How to set it up:
Add block ME401/402/403/404/405 to the page, set up the menu position behavior, the menu icon color and the menu items text color. You may use the following settings, for example:
Main settings > Menu position behavior — Fixed
Menu item > Color — black
Menu background > Collapsed menu background color — transparent
Menu background > Expanded menu background color — white
Add block ME401/402/403/404/405 to the page, set up the menu position behavior, the menu icon color and the menu items text color. You may use the following settings, for example:
Main settings > Menu position behavior — Fixed
Menu item > Color — black
Menu background > Collapsed menu background color — transparent
Menu background > Expanded menu background color — white
View this page in the browser window
MENU DESIGN OPTIONS
Multilevel menu
How it works:
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 block ME301 to the page, set up the menu as in the examples above, then add Subitems in Content.
1. Block Content > Menu Items > Add subitems
2. Click on plus sign next to the Item > Enter a submenu title and put a link
Repeat until all necessary submenus are added
3. Main Settings > Submenu Settings > Display second level menu item
Note: Main menu item itself will not be clickable. If you want to have a link on it, duplicate this item in the drop-down menu.
Add block ME301 to the page, set up the menu as in the examples above, then add Subitems in Content.
1. Block Content > Menu Items > Add subitems
2. Click on plus sign next to the Item > Enter a submenu title and put a link
Repeat until all necessary submenus are added
3. Main Settings > Submenu Settings > Display second level menu item
Note: Main menu item itself will not be clickable. If you want to have a link on it, duplicate this item in the drop-down menu.
View this page in the browser window
MENU DESIGN OPTIONS
Tabs
What it does:
An active tab allows users to browse content linked to it inside the webpage.
What it's used for:
Tabs allow you to show several categories of the same type of content such as portfolio examples.
An active tab allows users to browse content linked to it inside the webpage.
What it's used for:
Tabs allow you to show several categories of the same type of content such as portfolio examples.
How to set it up:
Add block ME602 or ME603 to the page. Use these blocks to create tabs and show content when the user clicks a tab within the same page. Below, add blocks in a sequence that will change when the user clicks a corresponding tab.
How it works:
1. Add tab titles in the Content menu of blocks ME602 or ME603.
2. Add the blocks' ID numbers that should be visible when you click the tab (separate with a comma, no space).
3. Find the block's ID number in the Settings menu of each block, scroll down to the bottom.
Add block ME602 or ME603 to the page. Use these blocks to create tabs and show content when the user clicks a tab within the same page. Below, add blocks in a sequence that will change when the user clicks a corresponding tab.
How it works:
1. Add tab titles in the Content menu of blocks ME602 or ME603.
2. Add the blocks' ID numbers that should be visible when you click the tab (separate with a comma, no space).
3. Find the block's ID number in the Settings menu of each block, scroll down to the bottom.
View page with menu in the browser window
So now you know 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
