APPROVED TO ADD

This component acts as a switcher for all content that sits below the component.

🛠 Resources

• Existing component: https://edx.github.io/paragon/components/tabs/

• https://www.figma.com/file/0uBm1o7nH2ExePrRXGvB7Z/Logistration?node-id=1%3A2

• Parallel work from Eugene Kang on tabs!

🌱 Use cases

• Switching between Login and Registration

• Discussion tabs: Switching between key actions within Discussions

• Not a use case - for discussion to review as a distinct nav pattern: Course Dashboard tabs: Switching between Courses, Programs and Discover New

• Not a use case - for discussion to review as a distinct nav pattern: In-course tabs: Navigating between Course Home, Dates, and any other tab

🌳 Variants

This component should scale to support at least 2 tabs and up to as many tabs at we think should be supported.

🌞 Best Practices

Mobile

We should consider the mobile experience for the tabs component. If there are only 2 tabs, we shouldn’t collapse the tab options on small screen sizes.

If there are more than 2 tabs, we should consider consolidating into either an accordion menu, dropdown menu, horizontal scrolling (least preferred).

Nesting

We should have some perspective on nesting a tab component. In the Discussion example above, the Course tabs themselves would be a tab component, but so would “My Posts” “All posts” and “Topics”. Do we need to consider 2 styles for tabs for when they are nested to indicate priority?

📐 Specification

⚛ Anatomy

♒ Behaviors

💕 Accessibility