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.
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.
Dos and Don’ts

- 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.

- 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.

- Don’t use horizontal navigation for a linear process. Use a progress bar instead.
Installation
Props
No records available |