Main navigation menu

Audience: Site Owner, Site Admin 

Please note this product is in development and you may find videos and documentation don't reflect current functionality. 

Topic covers how to manage your site's main navigation menu in Fresco, including adding, editing, removing and rearranging links in the menu.

A well-designed main navigation menu is essential for helping users quickly locate and access key sections of your website. It enhances usability, supports accessibility, and contributes to a positive user experience by making the interface intuitive and easy to explore. Learn how to create menus that are intuitive and accessible.

Timed transcript

• Go to Settings > Menus and then select ‘Main navigation’ and click ‘Edit menu’.
• Click 'Add link'.
• Enter short but descriptive link text.
• Choose whether it should be an 'Active' link (i.e. a clickable link) or just a button that reveals child items.  
• Start typing the page name to create the link and select the page from the drop-down list.
• Select 'Enabled' if you want it to be visible in the menu.
• Select the ‘Parent link’ to position the link in the menu. Please note:
  • The menu has a fixed number of levels in the hierarchy so if you reach this limit, you may not be able to add additional links.
  • If you’re adding a link to a top-level page, the parent link should be <Main navigation>.
• Adjust the display settings and add a hover description. Both are optional.
• Click ‘Save’ to return to the menu.

• Find the link in the menu and click ‘Edit’.
• Make your changes in the edit screen (follow the instructions above).
• Click ‘Save’ to return to the menu.

Choose one of these methods:

• Click on the drop-down arrow to the right of the link and select ‘Delete’.
• Click ‘Edit’ and use the red ‘Delete’ button at the bottom of the page.

You’ll be asked to confirm the deletion. 

• Use the drag-and-drop arrows to the left of the link name on the menu page.
• Drag up and down to move a link up and down in the menu hierarchy.
• Drag left to right to nest items under a parent.
• Alternatively, go to the edit screen and use the 'Parent link' drop-down list.

To ensure your navigation menu is intuitive and accessible, it’s important to follow best guidelines.

• Use clear, concise labels that accurately describe the destination.
• Avoid jargon, abbreviations, or overly clever names.
• Limit the number of top-level options (ideally to 5-7) to avoid overwhelming users.
• Organise items in a logical hierarchy that reflects how users think about your content.
• Group related items together under meaningful categories.
• Place the most important or frequently accessed items first.
• Avoid changing the order or labels of menu items unless necessary as this could result in broken links on your site or from other websites, email, documents, etc. 

Testing your navigation menu with real users is a useful step in ensuring its effectiveness.

• This will help to identify pain points, ensure they can find key content easily, and validate that the structure and labels are clear and intuitive.
• Try free tools like tree testing or card sorting from sites such as Optimal Workshop or Useberry.

0:01
In this video, you'll learn how to edit the main navigation menu in Fresco.

0:06
After signing into Fresco, go to the 'Settings' tab and select 'Menus'.

0:14
Find 'Main navigation' and click 'Edit menu'.

0:20
This will take you to the Edit menu main navigation page.

0:25
From here you can add, edit, remove and rearrange links within your navigation menu.

0:32
I will take you through each of these steps now.

0:35
To add a link to your menu, click Add Link in the top right corner.

0:42
On the next page, enter the link text.

0:47
This should be short but descriptive.

0:50
Choose whether it should be an active link, in other words a clickable link, or just a button that reveals child items.

0:59
Next, start typing the page title to create the link.

1:06
Decide whether it should be enabled, in other words visible in the menu, and select the parent link to position it in the menu.

1:21
Please note the menu has a fixed number of levels in the hierarchy, so if you reach this limit you may not be able to add additional links.

1:32
If you're adding a link to a top level page, the parent link should be main navigation.

1:41
You can also adjust the display settings and you can add a hover description.

1:50
Both of these are optional.

1:53
Click Save to return to the menu and see your new link.

2:03
To edit an existing link, find the link and click Edit.

2:09
Make your changes in the edit screen and then click Save when you are done.

2:17
To delete a link, you can either click on the drop down menu to the right of the name and select Delete or you can click on the edit button and click on the red delete button at the bottom of the page.

2:36
You will be asked to confirm the action.

2:38
Remember, deletion is permanent.

2:43
To rearrange links in the menu, use the drag and drop arrows.

2:49
You can move the links up and down in the menu and you can nest the links by moving them from left to right.

3:01
Alternatively, you can go to the edit screen and select from the parent link.

3:09
When you are done, click Save and you will be taken back to the main menu.

3:19
The main navigation menu is a key part of your site's usability and accessibility, so it's important to get it right.

3:27
A well structured menu helps users find what they need quickly and improves the overall experience for everyone, including those with assistive technologies.

3:38
Visit the Fresco help site to find out about making your navigation menu intuitive and accessible, and also to learn how to test your navigation menu with real users.

3:50
And that's it.

3:51
You've learned how to manage your navigation menu in Fresco.

3:55
Thanks for watching.
 

Back to top