Variant 01
Top navigation
Product-level movement with brand context and primary destinations.
View content
Components / organisms
Navigation
Navigation shows people where they are in a product and how to move around it.
Usage
When to use it
Use top navigation for product-level movement and side navigation for a focused workspace. Both are built from NavigationLink, and tabs and breadcrumbs can be added inside a page when people need context within a deeper task.
02 / examples
See the component in context.
Variant 02
Side navigation
Workspace-level movement that keeps the current section visible.
View content
03 / contract
Rules the component follows
Navigation shows people where they are in a product and how to move around it. Top navigation is used for movement between the main areas of a product, and side navigation is used for movement inside one area. Both are built from the navigation link molecule, so they show the same default, active and disabled statuses.
Each navigation is wrapped in its own landmark with a distinct label, so that assistive technology can list them and tell them apart.
04 / accessibility
Accessibility information
Navigation uses the native navigation landmark and each one has a clear, different label. The current page is shown with a filled background and is marked for assistive technology, so it is never shown by colour alone.
Menus that open and close return focus to the control that opened them when they are closed with Escape, so keyboard users never lose their place.