Navigation best practices: clarity, streamlined choices, contextual transitions
Navigation patterns should prioritize clarity and simplicity to facilitate seamless user interaction. Users should always have a clear understanding of their location within the application with intuitive navigational cues that minimize ambiguity. Minimize the number of navigational elements while ensuring the most essential items are available to prevent users from feeling overwhelmed. Strive to maintain a balance between contextual clarity and minimal interruption; transitions such as page refreshes or showing a dialog are useful for indicating context switches, but excessive transitions can lead to unnecessary cognitive load.
Entirely new page navigation: URL changes and page load
When navigating to an entirely new page, the URL changes and the requested page loads. In GitHub's single-page app architecture, this behavior is emulated without a traditional page reload. If navigating from a parent page to a child page, the child page should have a clear way to navigate back to the parent page, often done with breadcrumbs or a back button. Be mindful of data loss when a user is navigating away from a page where they have unsaved changes.
Same page different state navigation: avoid full page reloads
When a user activates a different state of their current page, strive to avoid full page reloads when feasible to maintain a fast and smooth user experience. The URL may or may not change when navigating to a different state on the same page.
New spot on same page navigation: URL change for page anchors
When a user navigates to a different section or moves focus to a specific element within the same page, the page content is not changed. This behavior is commonly used for scrolling to new sections or focusing on input fields. The URL should change if the section scrolled to is a page anchor.
Dialog navigation: new context with lighter feel than new page
Opening a dialog brings the user into a new context but can feel lighter than going to a whole new page. Focus is moved into the dialog, and the user cannot interact with the rest of the page without dismissing the dialog. The URL may or may not change when opening a dialog.
Nav list component usage and URL behavior
A nav list is a vertical list of links that can be used to implement a parent-detail navigation pattern, allowing users to navigate between different child views without leaving the parent page. It is often used in the sidebar of a split page layout. Activating a nav list item should change the URL.
Tree view component usage and URL behavior
A tree view is not semantically a form of navigation; it is for activating an option from a hierarchical list. However, it is often used to implement a parent-detail navigation pattern and is often used in the sidebar of a split page layout. Activating a tree view item may or may not change the URL.
Tabs navigation: underline nav vs underline panels
Tabs allow users to switch between related views within a consistent context. Use the underline nav component when activating a tab changes the URL. Use the underline panels component when activating a tab changes the content in the same page or context without changing the URL. Activating a tab may or may not change the URL, but you cannot mix tabs that change the URL with tabs that just switch the visible tab panel.
Action menu navigation: not semantically navigation but can contain URL-changing options
An action menu is not semantically a form of navigation; it is for activating an option from a list. However, it may contain some options that open a dialog or change the URL when activated. Action menus are also used to overflow horizontal navigation elements such as tabs when the container is too narrow to display all options inline. Activating an action menu item may or may not change the URL.
Breadcrumbs component usage and URL behavior
Breadcrumbs show the user where they are using a hierarchical list of links. Going from start to end, each link is one level of hierarchy deeper. Activating a breadcrumb item should change the URL.
Pagination component usage and URL behavior
Pagination is used to sequentially navigate long collections of content that have been broken into smaller chunks. Activating a pagination item should change the URL.
Segmented control navigation: filtering, sorting, or viewing in different format
While primarily used to make a selection from a short list, segmented controls can be employed as navigational components for filtering, sorting, or viewing content in a different format. When being used for navigation, activating a segmented control option may or may not change the URL.
Decision tree for tabbed navigation component selection
When designing an interface with tabbed navigation, first reach for underline nav when clicking the tab changes the URL or underline panels when clicking the tab just toggles tab panel visibility. If these components do not fit your use case, you may use a segmented control where the segments are links or have role="tab". If the format of the content changes and the selection switches content visibility like tabs, use a segmented control that is a tablist. If items are mutually exclusive options that sort content on the page and the URL changes, use a segmented control with button segments. If items are mutually exclusive options that filter content on the page and there is an option like 'All' that removes the filter, use underline panels.
Navigation layout principle: close proximity to affected content
Layout should be used to structure content in a way that reflects the hierarchy of the navigation within the app. Navigational elements should be laid out in close proximity to the content they affect. For example, pagination should go directly below the collection it navigates.
Parent-detail split page layout for navigation
A parent-detail split page layout uses a parent sidebar that affects detail content. The parent navigation remains on screen while the user navigates between different detail views.
Tabbed interfaces layout: tabs above content
Tabbed interfaces enable seamless navigation between different subpages within a unified context. Tabs go directly above the content they affect.
Page header and section headings for navigation
A page header is the title area at the top of the main content region that shows the user where they are. It may also contain navigational elements like breadcrumbs or a link to go up a level of hierarchy. Use section headings to show the user where they are in the context of the page. Page section headings should be marked up with the appropriate heading level (h3–h6) and styled to reflect their hierarchy within the page.