Overview
Tabs organize equivalent versions of content into a single interface, allowing learners to quickly switch between views without leaving the page. Unlike accordions, which encourage learners to explore multiple sections, tabs are intended for situations where learners typically need only one version of the information at a time. Because they hide content by default, tabs should be used sparingly and only when they clearly improve the learning experience.
Note: Although the use cases for tabs have been updated (Summer 2026), no changes have been made to our assignment and discussion templates. Tabs will continue to be used on those pages and will likely be updated in the future.
Common Pitfalls to Avoid
- Using long or overly descriptive tab titles
- Placing critical information inside tabs
- Using tabs for step-by-step instructions, sequential activities, or content that learners need to review in a specific order
- Nesting accordions or additional tabs inside tabs
- Using tabs solely to reduce page length or minimize scrolling
- Separating content that learners need to view or compare together
[Example]
Team Bibimbap Challenge
Your team has been assigned the task of preparing and serving bibimbap. Each team member has a different role. Select your assigned role to review your responsibilities, key steps, and what you need to coordinate with the rest of the team.
Vegetable Prep
You are responsible for preparing the vegetables that will be arranged on top of the rice.
Your responsibilities:
- Wash all produce before beginning.
- Slice the carrots and zucchini into thin, even strips.
- Prepare the spinach and bean sprouts.
- Keep each vegetable separate so the ingredients maintain their individual colors and textures.
- Cook or season each vegetable according to the recipe.
- Place the finished vegetables in separate containers for the Assembly Lead.
Coordinate with your team:
Let the Assembly Lead know when each vegetable is ready. If one ingredient is delayed, communicate that early so the rest of the team can adjust the timing.
Quality check:
Vegetables should be evenly cut, properly cooked, and still have good color and texture. Avoid overcooking them.
Rice & Protein Cook
You are responsible for preparing the rice and the main protein for the dish.
Your responsibilities:
- Measure and rinse the rice.
- Cook the rice according to the recipe and keep it warm until assembly.
- Prepare the marinade for the beef or other assigned protein.
- Cook the protein thoroughly and in manageable batches.
- Keep cooked protein separate from raw ingredients and utensils.
- Hold the finished protein at the appropriate temperature until serving.
Coordinate with your team:
Check with the Vegetable Prep team member about timing. The rice and protein should be ready shortly before the vegetables are finished so everything can be served warm.
Quality check:
Rice should be tender rather than mushy, and the protein should be fully cooked, flavorful, and cut into pieces that are easy to eat.
Sauce & Garnish Specialist
You are responsible for the finishing ingredients that give the bibimbap its flavor and presentation.
Your responsibilities:
- Prepare the gochujang-based sauce according to the recipe.
- Taste the sauce and check its consistency.
- Prepare garnishes such as sesame seeds, sliced green onions, or shredded seaweed.
- Portion the garnishes so the Assembly Lead can work efficiently.
- Prepare any requested alternatives, such as a less-spicy sauce.
Coordinate with your team:
Confirm how many servings are needed and whether there are any special requests before portioning the sauce and garnishes.
Quality check:
Sauce should be evenly mixed and easy to drizzle or spoon onto the dish. Garnishes should be fresh, neatly prepared, and ready for immediate use.
Assembly & Quality Lead
You are responsible for bringing all of the team’s work together into the finished dish.
Your responsibilities:
- Confirm that the rice, vegetables, protein, sauce, and garnishes are ready.
- Portion the rice evenly into each bowl.
- Arrange the vegetables and protein in distinct sections over the rice.
- Add the appropriate garnish and sauce.
- Check each bowl against the recipe before it is served.
- Make sure any special requests have been followed.
Coordinate with your team:
You should communicate throughout the activity rather than waiting until assembly begins. If an ingredient is missing or not ready, work with the appropriate team member to resolve the issue.
Quality check:
Before serving, ask:
- Does the finished dish look consistent with the other servings?
- Are all required components included?
- Are the ingredients arranged neatly?
- Is the serving size appropriate?
- Were special requests followed?
CDD Tag
<tabs></tabs>
Guidelines
Do
ID
Use tabs when learners need different versions of related information. This helps them quickly find the content that applies to their situation without reviewing unnecessary material. Examples include instructions for different operating systems or software, such as Windows and Mac or Excel and Google Sheets.
ID
Use tabs when the same topic requires different guidance for specific roles or audiences and learners only need the information relevant to them. This allows each person to select the appropriate tab without reviewing every option, such as guidance for students or instructors, managers or employees, or nurses or doctors.
ID
Create Short Tab Titles (<50 characters)
Keep tab titles under 50 characters. Short, descriptive titles are easier to scan, improve readability, work better on smaller screens, and help users quickly find the content they need.
ID
Ensure Two Tab Items Minimum & Five Tab Items Maximum
Tabs should include at least two and no more than five sections to establish a clear visual structure and keep navigation easy to scan and understand.
A single tab introduces unnecessary interaction without improving content organization and may confuse users who expect multiple selectable options.
More than five tabs can increase cognitive load and make it harder for learners to quickly distinguish between sections. If more than five sections are needed, consider grouping related content, restructuring the information, or using a different approach.
Do Not
ID
Production
Use for Step-by-Step Instructions
Avoid using tabs for instructions that learners must complete in a specific order. Instead, simply use a numbered list so learners can easily follow the full process without moving between tabs.
ID
Sequential Learning Activities
Avoid using tabs when each tab represents a step or activity in a sequence, where the content in one tab builds on or depends on the previous tab. Because tabs allow learners to move freely between sections, they can obscure the intended progression and make it easier to complete activities out of order. Instead, use a format that keeps the sequence and progression clear
ID
Production
Long-Form Reading
Avoid placing long passages of text within tabs. Hiding substantial content can make the reading experience feel fragmented and make it more difficult for learners to understand how ideas connect.
ID
Content Shorter Than Approximately 50 Words
Avoid using tabs for very short sections of content. When each tab contains only a sentence or two, the additional interaction creates unnecessary effort without improving organization or comprehension.
ID
Critical Information
Avoid placing essential information inside tabs. Critical information should remain immediately visible so learners do not overlook it.
ID
Reducing Page Length or Scrolling
Avoid using tabs solely to shorten a page or reduce scrolling; scrolling is a familiar and efficient way for learners to move through content.
ID
Multiple Examples That Learners Should Read Together
Avoid separating related examples into tabs when learners benefit from comparing them. Display the examples together so similarities, differences, and patterns are easier to identify.
ID
Reference Material That Users May Need to Revisit Repeatedly
Avoid placing frequently used definitions, formulas, procedures, or other reference information inside tabs. Keep this material visible and easy to scan so learners can return to it quickly without reopening multiple sections.
ID
Production
Nest Interactions in Tabs
Avoid placing interactive components such as tabs, accordions, or collapsibles within tabs. Nesting interactions creates multiple layers of navigation, increasing cognitive load, and making it more difficult for learners to understand the content hierarchy, discover information, and maintain their orientation.