💠 Navigation Menu

A collection of links for navigating websites.

Usage

The Navigation Menu component serves as a collection of links that help users navigate through a website's various pages and sections. It is a critical component for any website, providing a roadmap to the content and making the site's structure understandable at a glance.

Navigation Menus are typically located at the top of a webpage, but can also be found on the side or bottom, depending on the layout and design.

When to use

• Primary navigation: Use a Navigation Menu as the primary means for users to find and access the main areas of your site or application.
• Structured content access: Employ a Navigation Menu to provide structured access to your content, presenting it in a hierarchical, easy-to-understand manner.
• User orientation: Navigation Menus help users understand where they are within your website and how to return to previously visited pages or access new areas.

Avoid using overly complex Navigation Menus that can confuse users or make it difficult to find content. Keep the number of top-level items manageable, and be cautious of deep nested structures in dropdowns or flyouts. Don't rely on the Navigation Menu as the only means of accessing content; provide alternative pathways and search functionality for a comprehensive navigation system.

Examples

Default

Vertical

Small

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

This component adheres to the navigation role requirements (opens in a new tab).