Variant 01
Links
A link has three statuses: default, active for the current page, and disabled for a destination that is not available right now.
Components / molecules
Links, tabs and breadcrumbs
The small pieces of navigation: a link to a destination, tabs that switch views, and breadcrumbs that show where a page sits.
Usage
When to use it
Use links for single destinations, breadcrumbs to show where a page sits in a hierarchy, and tabs to switch between peer views of one thing without leaving the page.
02 / examples
See the component in context.
Variant 02
Breadcrumbs
Where this page sits in the hierarchy. A trail of links ending in the current page.
View content
Variant 03
Tabs
Peer views of the same thing, switched in place. Not a way to move between pages.
View content
Overview content.
03 / contract
Rules the component follows
The navigation link points to a destination and has three statuses: default, active for the current page, and disabled for a destination that is not available right now. Tabs switch between views of the same thing without leaving the page, and breadcrumbs show where the current page sits in the hierarchy and always end with the current page, which is not a link.
Tabs move focus with the arrow keys, Home and End, and only one tab stays in the Tab order at a time. Together these three small parts are the building blocks of the larger navigation sections.
04 / accessibility
Accessibility information
The active link is marked for assistive technology as the current page and has a filled background, so it never relies on colour alone. A disabled link is shown as plain text that is marked as unavailable, so it is skipped by the Tab key and announced as not available.
Breadcrumbs are an ordered list inside their own navigation landmark, and the last item is marked as the current page. Tabs use the standard tablist, tab and tabpanel roles, so screen readers describe them correctly.