Purpose
The purpose of a menu is to provide visitors with a navigational structure, allowing them to easily find and access different sections or pages of the website.
When to Use Menus
Menus help users find information quickly and easily by organizing content into categories or sections. They make browsing more efficient and improve the overall user experience. Additionally, menus show the hierarchy and organization of your website's content, helping users understand how the site is laid out and navigate it smoothly.
Elements of a Menu
Navigate to our DX Training Video guide for further visual guidance.
Create a menu by selecting the page directly to the main menu, on the right-hand "edit menu" settings within the page edit section.
The hamburger menu appears when the menu items or their length exceed the width of the menu container.
Example of Menu Navigation Disappearing (hamburger):
Nesting
For the Main Menu Navigation, we don't recommend more than 4 levels of nesting. Try and break up your sections as much as possible so your nesting does not go so "deep." What happens with 5+ levels of nesting is your page may not appear on the right-hand sidebar.
External links
You can add external links within your main menu navigation by navigating to "Structure" then "Main Navigation" and select "Add Link"
Example of adding External links to Main Navigation:
Within that page you can add your external link and to have it appear in the main navigation make sure that is selected within the Parent Link Field
Side bar Menu
Menu's can also appear at the right hand side bar for different pages like basic page, location, How Do I, etc
Example of a Menu within a Location page:
For any individual page, you can easily add and remove the menu link on the right-hand-side by checking and unchecking the "Provide a menu link" box.
The Menu URL is too long, how can I shorten it?
The reason the the menu URL is long is due to the menu nesting.
Example of Menu Nesting for a side bar navigation:
You can easily edit your menu navigation when content managers with the proper access selects "Structure" and then click "Main Navigation" so the List of Menu Navigations Page pulls up.
For our example you can see that or page "Work with Listing Pages of Events" is nested within the menu under the "Work with Listing Pages" menu link.
Example of Menu Nesting within the Main navigation:
If you would like the menu URL to be shorter you can move that menu link to the top of the menu navigation instead of the bottom.
Doing this will change the URL link from this long line:
To this shorten URL:
Special Note: When you are first creating your page you can also title your page with a shorter name or use the Short title field.
Log in to your site
Everyone who writes things on this website has a special title. These titles give them certain abilities, like who can edit, review and publish what. You can ask for a different title or take one away from someone using the user manager.
Navigate to the Content tab
You can add pages to your website by navigating to the content button but make sure you are logged in so that you can have access to that tab.
You can sort the pages that you've created using the filter button as well as edit the pages you've created for your website by selecting the edit button within the content list page:
(Example of Content list page)
Add a specific item to the Menu by using the right-hand-sidebar Menu link
Based on your permissions, you'll be able to add a content type that you're creating or editing, and put that item into the navigation. All main content on the site such as Basic Pages, Landing Pages, How do I content, News items, and FAQ lists, should have an equivalent menu link for ease of wayfinding.
Microcontent that gets "placed" into a page such as Steps, Accordions, Promos, and Statistics, should not be placed in a menu directly; instead, create a new Basic Page and place that microcontent into the Basic Page, then add that Basic page to the menu.
Click on the right-hand sidebar to "Add a menu link" and title the menu item, then assign the "weight". A "lighter item" with a small number, will "float" to the top. A "heavier item" with a much higher number, will sink down to the very bottom of the menu items.
Note that more than 6 main navigation menu items, will cause the menu to become a "hamburger" on the topmost right-hand side.
Be Aware of Navigation Menu Limits!
The Navigation menu allows for limited items before shifting to a "hamburger" style menu on the top right.
When possible, use shorter navigation menu labels, and make the number of menus around 6-7. Visit your peer websites to get a sense of what the menus show and the different menu links that peer agencies are choosing.
For example, this is a longer menu that must shift to hamburger style:
Confirm your knowledge
If you need visual guidance that shows the step-by-step process of creating things for your website make sure to go to our Video Training Page!