Horizontal navigation
Menu placed at the top of a site that links to important pages or features.
The horizontal navigation component is a container enabling users to navigate a product or experience. It’s a common type of menu that’s usually placed at the top of a website.
Also known as: Horizontal menu, horizontal navigation bar, top navigation bar, horizontal tab navigation, row navigation, UITabBarController (iOS), TabLayout (Android).
Anatomy
A. Brand mark (optional): Visual element representing Visa, a partner brand, or a fictitious brand associated with the product.
B. Application name (optional): Label indicating the name of the application.
C. Navigation link (required): Label indicating the destination of the link.
D. Nav menu (optional): Menu that expands to show nested navigation items under a common heading or category.
E. Global search (optional): Icon button prompting a global search bar to find content across the whole site or app.
F. Notification badge (optional): Badge component that expands and collapses the notification tray.
G. User profile (optional): Avatar component representing the current user’s account.
Usage
| Component | When to use | When not to use |
|---|---|---|
| Default | For websites with a few main navigation items. | If navigation items are lengthy or complex. |
| Stacked | For websites with a larger number of main navigation items. | If website navigation is limited and simple. |
Best practices
- Reference Application layouts for help deciding which navigation component is best for your use case.
- Ensure the order of the navigation items is consistent throughout the application so users aren’t confused.
- Avoid exceeding seven items or links in the main navigation.
- Consider making the brand mark and/or application name function as a link to the homepage of the experience.
- Ensure the navigation bar remains visible as the user scrolls.
- Follow all guidance found in Search, Notification tray, Link, and Avatar when implementing those items in the navigation.
Default horizontal navigation
The default horizontal navigation bar includes a single level of navigation items. Items can link directly to a page, dropdown to show nested items, or prompt related functions like a search bar or notification tray.
Stacked horizontal navigation
The stacked navigation bar provides extra space for navigating complex apps. If your app requires multiple dropdowns or the default bar looks crowded, the stacked version can help declutter the experience.
Nav menus
Nav menus refer to dropdowns in the navigation bar that expand to show nested links. The top-level label doesn’t link to a specific page, and doesn’t change to reflect the user’s selection.
Note: Nav menus are built using a modified dropdown menu component. For accessibility reasons, don’t use the default dropdown menu or replace it with a select component. Always consult with accessibility partners before modifying the behavior of any component.
Do Use a nav menu to save space by grouping related links.
Don't Mix links and actions within a nav menu.
Do Use a descriptive label indicating what links are in the menu.
Don't Update the label to reflect the user’s selection.
Icon usage
Icons can be used in navigation menus to make scanning easier and reinforce familiar ideas.
- Ensure icon usage applies to all navigation items within the same hierarchy level. For example, if you use icons for some L1 labels, they should be used in all L1 items.
- Omit icons for nested items, but if they’re necessary, ensure all items within the nested level has one.
Behaviors
Chevron direction
Visually differentiate expanded and collapsed sections using the chevron direction.
Collapsed
Collapsed sections should use the downwards-pointing chevron to indicate collapsed content can be expanded.
Expanded
Expanded sections should use the upwards-pointing chevron to indicate expanded content can be collapsed.
Platform considerations
Web
Horizontal navigation is responsive for web applications, and the behavior is modified based on screen size. For tablet and smaller web screens, horizontal navigation reduces to the 768px component. At this size, links are placed in a hamburger menu and the application name and brand mark are centered instead of left-aligned.
Mobile
For mobile screens, the horizontal navigation bar turns into a top app bar component instead, with the brand mark centered.
Content
- Write all content in sentence case, except for acronyms or proper nouns, like the application name.
- Don’t use punctuation for navigation items.
- Ensure labels match page titles to enhance the user’s understanding of the site’s information hierarchy.
- Limit labels to a few brief words to prevent unnecessary reflow.
- Reference Grammar and punctuation to learn how to use parallel structure for consistent phrasing.
