Menus and Navigation
On this page
Building an effective website navigation
Your website’s navigation should meet the needs of your target audience(s). Your website’s navigation should:
- Highlight the most important things that your target audience needs to do on your site.
- Organize pages the way your audience thinks about the information, not the way your organization is structured.
- Use labels your target audience understands, not labels used by your internal team.
- Be clear, concise, and descriptive.
Watch: How to manage your site's menu
See the basics on how to manage your site's menu.
Navigation that you can customize
Main navigation
Use the main navigation to help your primary audience(s) find the most important services, resources or programs your agency offers.
The main navigation appears underneath the horizontal line in your website’s header, at the top of every page. The main navigation includes links to the main sections of your site and if applicable, a dropdown menu listing the pages within that section.
An effective main navigation might include:
- No more than five or six labels
- Broad services you offer, such as “Educational Programs” or “Grants”
- High-level information that introduces visitors to your agency, such as “About Us” or “Meet the Team”
Utility navigation
Use the utility navigation to highlight sections that are important but not the same level of importance as your main navigation. The utility navigation appears above the search box in your site’s header.
Tips:
- The utility navigation is optional. It is most useful for larger websites.
- Links can be shown as a text link or as a button.
An effective utility navigation might include:
- Lower priority pages that don’t fit nicely into your main navigation, such as “News and Events”.
- Resources only relevant to your secondary audiences. In some cases, you may want to specify the audience directly, such as “For Partners.”
- Actions website visitors can take. Start these labels with a verb, such as “Contact Us” or “Make an Appointment”.
Agency Footer
Use the agency footer to highlight additional links beyond what is included in your site’s main navigation and utility navigation. The agency footer appears directly above the Global Footer.
You can optionally include text headings to organize related footer links.
An effective footer might include:
- Contact information and any social media links
- Important organizational info, such as “Staff Directory”
- High priority actions that may not be any of the main navigation labels, such as “Pay My Bill”
- Legally required information, such as “Regulations”
Navigation that shows automatically
Banner
The banner appears at the very top of every page and cannot be customized. The banner identifies your site as an official and secure website of the State of Maryland. The banner also includes a link to Maryland.gov and the ability for website visitors to Translate the page.
Global footer
The global footer appears at the bottom of every page and cannot be customized. The footer provides a consistent set of links to the State’s top programs, services, and information for visitors of every Maryland website.
Side navigation
Many of your site’s visitors will arrive by following a search result or social media link. Very often these links will take visitors to a page that is not your site’s homepage.
The side navigation helps these visitors understand where they are within your site. The side navigation appears on all pages other than your homepage.
Mobile Display: On small screens, the side navigation is displayed as a full-width menu labeled “Section menu.”
Breadcrumbs
Like the side navigation, breadcrumbs help users understand where they are in a website. Breadcrumbs appear above the page title.
Can I add links to other websites in my navigation?
Yes. Your main navigation, utility navigation and agency footer can include links to other websites.
Generally users expect that links in a website's main navigation go to pages within that website. If links in your main navigation go to pages outside of your website, this could potentially confuse users. This doesn't mean you can't do it; just be aware of it and arrange for testing and evaluation to ensure that those links are working the way you want them to.