Nav Preview
Nav, or navigation, provides a list of links that lets people move through the main sections of an app or site. It’s a high-level wayfinding component that’s always easily accessible but can be minimized to free up space.
Nav only supports one level of nesting and might not show all available items. If you need to show a deeper and more complex hierarchy, use Tree instead.
Resources
Behavior
Structure and strategy
Good navigation quickly funnels people to the things they want most. Poor content can leave people lost and frustrated. Depending on the product and the context, make your navigation task-oriented (using verbs), or feature focused (using nouns). Remember, search and pinning are not substitutes for coherent navigation. Follow these guidelines to make navigation as intuitive as possible without shortcuts.
- Keep it brief
- Use plain language
- Make it easy to scan
- Focus on the user’s goals
- Clearly state where each link goes or what people are looking for
Creating navs can take a substantial investment in time. How you approach your menu will depend on whether it’s a new product or a redesign of an existing one. For a new product, the info you start off with might be limited and require more assumptions. For an existing one, you might have access to a lot of data to help inform your decision-making. Either way, work with your research team, to create useful and well-designed nav menus.
Task oriented navigation
Feature focused navigation
Selection
The selection indicator tells people at a glance which page is active. If a nav sub-item is the active page and the category is closed, the selection indicator will display on the nav category.
Selection indicator on a sub-item
Selection shifts to NavCategory when closed
Secondary actions
NavItem and NavSubItem can have associated secondary actions. Secondary actions are visible on hover and useful for actions like pinning or accessing an overflow menu.
Minimize available actions in nav nodes. In most cases, stick with only one secondary action. If you have several actions available per nav node, try making them accessible through an overflow menu. Consider providing editable actions in another surface rather than directly in the component, to keep Nav high-level, clean, and functional.
NavCategoryItem cannot have secondary actions.
Layout
Hamburger icon
The hamburger menu icon is a persistent and predictable UX pattern to expand and collapse Nav across different applications.
Grouping
Navs can be organized with up to two levels of hierarchy. Simple navs list the spaces in a site or app as links on the same level. For more complex navs, links can be grouped into categories for easier interaction.
Simple nav
Complex nav with categories
Create a simple nav using nav items. These are first-level links that give people a quick understanding of the main parts of an experience.
Create a complex nav using nav categories and sub-items. Nav categories expand and collapse so people only see the information they need. Nav sub-items group related links within that category and let people navigate to those sub-pages. Nav categories act as accordions and show or hide information; they’re not links and won’t lead to site or app locations.
Icons
Whenever possible, use icons with nav category labels. They create additional visual emphasis and differentiate nav categories from the nav subitems within them. Use simple and recognizable icons that are easy to understand.
If icons aren’t technically possible or difficult to pick due to an overwhelming number of nav items, remove them. If nav categories don’t include an icon, subitems are indented to maintain a clear hierarchy.
Nav doesn’t support an icon-only layout.
Nav with icons (recommended)
Nav without icons
Chevron
The nav category chevron indicates sub-items are available. The consistent placement of the chevron makes it predictable and easy to distinguish a nav category. Don’t move the chevron to any other location on the nav category.
Correct chevron location
Incorrect chevron location
Flex space
Flex space is a product-defined space that can be used to hold high-value items critical to product excellence. Examples might include a search, a primary button, the app name, or a tree.
Flex space can only be in the body portion of the Nav drawer. Padding is defined, but partner teams must resolve accessibility requirements.
Footer
Nav has a footer slot, but its use is not recommended since it might obscure other nav content.
A footer creates a persistent navigation element distinct and separate from the established hierarchy in the Nav body. In long navigation scroll states, header and footer will elevate and the body content will scroll behind, thus hiding nav content. Use cautiously and double check available screen real estate at 400% zoom.
Reflow and overflow
Nav labels should be kept brief so they’re easy to read at a glance. However, long labels will wrap by default. The maximum width is defined by the drawer that it sits in.
If you truncate and need a tooltip, make sure you display the tooltip on the right of the nav node, not above. Placement above could block people from perceiving or understanding other nav nodes.
Nav sits in an inline drawer and generally appears next to content. By default, Nav is set to 260 pixels wide. At 640 pixels screen width, it becomes an overlay drawer to save screen real estate.
Content
Make it short and clear
Nav is meant to be a helpful map and out of users’ way until they need it. Make it short and easy to scan. Keep nav item labels brief and clear, rather than overly specific.
If using a menu button to expand and collapse the Nav, use the tooltip “Expand navigation” or “Collapse navigation.”
Use sentence-style capitalization—only capitalize the first word of each nav item. For more info, see Capitalization in the Microsoft Writing Style Guide.
Maintain taxonomy and order
Use the word that feels right for the navigation. For example, some items may make more sense as nouns (e.g. “Files”), others as adjectives (“Shared”). Use what makes sense for customers.
Prioritize the most important categories people might want to get to first. Try to keep your app’s nav in a consistent order across platforms. This sort of consistency increases predictability which drives customer confidence, thus retaining and engaging them.
In user-facing content
In user-facing content, always use the term “Navigation” to refer to the main nav of an app or site. For example, “To change your preferences, go to Settings in Navigation.”