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 dropdown 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 go through each navigation style available and how to change your navigation should you need to. However, we recommend consulting with our team before changing your menu style, particularly if you want a mega menu.
But first, we'll go through the levels of navigation and how they correspond to your site tree.
Levels of navigation
Your navigation menu can display up to three levels of your site tree, depending on which style you choose. Hamburgers and dropdown menus can display two or three levels, while the mega menu will always display three levels. 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. Please note that this will also hide that page from OC Landing Pages and Featured sections.
Types of Navigation menus
There are three navigation styles available on OpenCities:
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.
The benefit of this menu is that it leaves the most screen space for other content on your site, and there's no limit on first, second, and third-level items in the menu. This allows easy navigation of complex sites with many branches to the site tree. However, we do 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.
Dropdown menus
Dropdown 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 dropdown sub-menus, so this menu is best used if your content is organized into broad categories.
Dropdown 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 it difficult to navigate. Additionally, remember that you'll need to hide any first-level pages that you don't want in your menu from navigation.
Mega menus
Like dropdown 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 at once.
Using a mega menu requires careful planning of your site's structure, as your content will need to be concise and organized so visitors are not overwhelmed with information. If your site is organized, this is the easiest 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 that sit in each section of your menu.
How to change your navigation style
This is a task for users with the role: OC Site Designer.
Updating your site's main navigation menu style, the depth of navigation, and the visibility of top tasks is a site designer and developer task requiring specialist knowledge to get the best results. If you're not sure 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 dropdown menus:
- Options one, two, seven, and eight use a dropdown 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.