A navigation menu is what your community will use to browse and navigate your site. The menu will appear on every page of your site, and there are several types of navigation from which you can choose.
On desktop devices, your menu can appear as a horizontal drop-down menu across the top of the screen or minimized as a hamburger menu that can be expanded. However, the navigation menu will always be minimized as a hamburger menu on mobile devices, regardless of the menu style you select for your site.
This article will discuss each navigation style available and how to change your navigation, if necessary. However, we recommend consulting with our team before changing your menu style, particularly if you want a mega menu.
Please note that regardless of your menu style, you cannot track how many clicks an item gets in the CMS or Google Analytics.
But first, we'll go through the levels of navigation and how they correspond to your site tree.
Levels of Navigation
Depending on your style, your navigation menu can display up to three levels of your site tree. Hamburgers and drop-down menus can display two or three levels, while the mega menu will always display three. You can make these choices in your theme's layout.
These levels correspond to the levels of pages in your site tree. In the example above, the Community landing page is a first-level item. The Parks & Recreation listing page is second-level. Central Park and the other individual park pages are third-level.
A two-level navigation menu will display the Community landing page and the Parks & Recreation listing page but not the individual park pages. Site visitors can use the listing page to navigate to the park pages.
A three-level navigation menu would show Central Park and the other park pages in a sub-menu below the Parks & Recreation listing page, allowing visitors to go directly to them.
If you don't want a page on your site to display in your menu, go to the Settings tab of that page and check the Hide this page from the navigation menus box. This will also hide that page from OC Landing Pages and Featured sections.
Types of Navigation Menus
There are three navigation styles available:
Hamburger Menus
A hamburger menu, so named because of the distinctive three-line icon of its design, is minimized by default and expands when selected. The hamburger menu will always be used when the site is viewed on a mobile device.
This menu's benefit is that it leaves the most screen space for other content on your site, and there's no limit on the first, second, and third-level items. This allows easy navigation of complex sites with many branches to the site tree. However, we recommend that you don't present too many items in this menu style, as it can complicate things for visitors trying to find specific content.
Drop-down Menus
Drop-down menus display first-level items in a row across the top of your site, with nested sub-menus displayed when selected. Be mindful of the space your menu takes and the character limit of your page titles; if they don't fit on one line, they will stack as you add more. You can choose to show either two or three levels of navigation, and there is no size limit for the drop-down sub-menus, so this menu is best used if your content is organized into broad categories.
Drop-down menus are more accessible than hamburger menus, as the first-level options are always visible to site visitors. However, you should still avoid displaying too many options in your menu, as this can create accessibility challenges and make navigating difficult. Also, remember that you'll need to hide any first-level pages you don't want in your menu from navigation.
Mega Menus
Like drop-down menus, mega menus display first-level items in a row across the top of your site. However, when a site visitor selects a first-level option, every second and third-level page below it is shown.
Using a mega menu requires careful planning of your site's structure. Your content must be concise and organized so visitors are not overwhelmed with information. If your site is organized, this is the most straightforward menu style for visitors, as they can see the structure of your site and navigate through it with one click.
You can also present top tasks in your navigation menu, although they are best suited to mega menus. Top tasks draw attention to popular or essential pages using styled links in each menu section.
How to Change Navigation Styles
This task is for users with the OC Site Designer role.
Updating your site's main navigation menu style, depth of navigation, and visibility of top tasks is a task for site designers and developers that requires specialist knowledge to get the best results. If you're unsure how to work with the Theme Builder, we recommend contacting us to update your navigation menu as part of your next theme refresh.
If you have designer and developer experience, you can change your navigation style by selecting a different layout for the Header component in your theme. There are eight layouts to choose from, some of which use hamburgers and some use drop-down menus:
- Options one, two, seven, and eight use a drop-down menu, which can be a mega menu if you select it.
- Options three, four, five, and six use a hamburger menu.
With each layout option, you can also choose if you're using two or three levels of navigation.