Tabs are intended for page-level navigation between multiple URLs. Each tab must have an individual title that precisely describes the tab content. Provide a short, descriptive label for screen-readers using
accessibilityLabel. It is helpful for users of assistive technologies so they have the necessary information to navigate the content efficiently.
Tab key navigates the tabs.
Enter/return key activates a tab (i.e., it navigates to the link
The tab/link must announce a state of "current" if the
href matches the current window URL.
Be sure to localize
The Tab's title should be 3 words or less: long enough to be understood by users but short enough to prevent text wrapping. Aim for a single word when possible.
Component quality checklist
Component is available in Figma across all platforms.
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is slotted to be built for Android.
Link is used to navigate to different areas of the product or to external sites. Link is the preferred component in cases where you want to direct the user to unrelated content.