Main navigation menu

As explained in Design for Developers

A main navigation menu is the primary interface control for accessing a website’s top-level sections.

A main navigation menu gives users access to a website’s top-level sections. Build it from a sitemap and content inventory, but treat those artifacts as guides rather than complete navigation systems. section 5.1.1

Make the menu support both organization and wayfinding:

• Use user research, including card sorting, to learn how visitors expect content to be grouped. section 5.1.1
• Keep the main menu focused on top-level landing points, especially when the site extends several levels deep. section 5.1.1
• Add secondary navigation and breadcrumbs so users can navigate deeper sections and understand where they are. section 5.1.1

A deeper website

A header menu can open a dropdown containing second-level landing pages. When users continue into third- or fourth-level content, a sidebar can provide section navigation and show the path back to the page they came from. section 5.1.1

Figure 5.4 The navigation on this website extends deeper, beyond what’s available in the header navigation. The sidebar on the right serves as navigation to the site’s deeper levels and as a wayfinding tool to let the user know where they clicked from.

See how header navigation, deeper section links, and a sidebar wayfinding tool work together. section 5.1.1

How Design for Developers covers it

How deep it goes

Explains sitemap-informed menu planning, then distinguishes deeper navigation that requires secondary menus and breadcrumbs.

Examples

Uses dropdowns for second-level landing pages and sidebars for deeper navigation and orientation.

What it assumes

Assumes basic website content organization and introduces user research through card sorting.

What you can do after

Apply it by limiting the main menu to top-level destinations and adding navigation aids for deeper pages.

How it connects

Connects information architecture, user research, card sorting, sitemaps, content inventories, secondary navigation, and breadcrumbs.

liveBookmanning.com

Read Design for Developers on liveBook Get the book at manning.com

Related concepts

• content inventoryconfigured by · A content inventory is a structured record of the content assets in a digital product and their attributes.
• sitemapconfigured by · A sitemap is a structured, machine-readable resource that lists a website’s URLs and may provide metadata to support their discovery and indexing.
• secondary navigation menucontrasts with · A secondary navigation menu is a navigation control for accessing pages or sections below a website’s top-level navigation.

This explainer was generated by Manning's knowledge graph from the text of Design for Developers. The section links point to the parts of the book it draws on.