Horizontal Navigation

Horizontal navigation lets users move between pages in a system or on a website. It is typically the main navigation component, accommodating the top level of the information architecture.

Overview

Use horizontal navigation to organize and segment content in a system or on a website. For products with large information architectures or substantial content, use horizontal navigation for the top-level navigation and integrate dropdowns, breadcrumbs, tabs, and side navigation further break up content.

Design and Layout

Placement and Alignment

Place horizontal navigation below the website header and above all page content, including text headings. If needed, position a dropdown menu above the horizontal navigation. Limit the horizontal navigation component to six tabs.

Horizontal navigation is designed to span the full viewport (like app headers), with tabs spaced evenly across the content area.

Horizontal Nav Example

Mobile and Tablet Devices

Horizontal navigation is designed for larger screens. On tablets and mobile devices, it should collapse into dropdown menus to fit the limited width.

Horizontal Nav Mobile Tablet Example

Dos and Don’ts

Horizontal Nav Dos and Don'ts
Do
  • Do use short, clear labels that describe the page content.
  • Do use dropdowns and other navigation components, such as breadcrumbs, side navigation, and tabs, for products with large information architectures.
  • Do use horizontal navigation instead of side navigation for pages that need maximum content width, such as pages with large data tables.
Horizontal Nav Dont Example
Don't
  • Don’t use lengthy or inconsistent labels that wrap. Choose short noun or verb phrases that clearly describe the page content.
  • Don’t include more than six tabs in a horizontal navigation component. Use dropdowns to create subpages or integrate breadcrumbs, side navigation, and tabs to organize and conserve content space.
  • Don’t use horizontal navigation twice on one page or for inner page content. Use the tab component for toggling between similar information on one page and horizontal navigation for moving between different pages within an application or website.
Horizontal Nav Dont Example2
Don't
  • Don’t use horizontal navigation for a linear process. Use a progress bar instead.

Installation

Props