Organize and group related content into smaller sections navigable within a single container

# Overview

Due to an issue with how Codesandbox handles link clicks, the CdrTabs examples do not work properly in the Codesandbox environment.

# Default (Medium)

Tabs align left and bottom border expands to full width of container.

# Compact (Small)

Reduced spacing around the tabs to create a denser visual design.

# Full Width

Tabs space evenly across the container.

# No Border

Bottom border of tab header list is removed.

# Centered

Centered tab header content.

# Active Tab

Tabs using the active-tab property to make the third element active on page load.

# Accessibility

Tabs component maintains these keyboard interactions:

  • Left arrow and Right arrow keys: Moves user between tabs
  • Down arrow: Moves user into the content within the active tab section
  • Up arrow: Returns user to the selected tab

This component has compliance with WCAG guidelines by:

  • Using text color with a Level AA contrast ratio of 4.5:1 contrast between the text color and the background (but only when displayed on light backgrounds)
  • Includes tablist role in tabs header container
  • Includes tab role in tab header element
  • Includes tabpanel role in tab content element

# Guidelines

# Use When

  • Organizing related content in a single container
  • Flipping between multiple panes or sections
  • Grouping content to display horizontally
  • Content can be broken into discrete parts

# Don't Use When

  • Grouping content to display vertically. Instead, use Accordion
  • Creating primary navigation that links to other pages
  • Comparing related content. Instead, use Table

# The Basics

  • Keep tabs in the same order, even when some tabs are disabled
  • Keep to no more than 6 tabs
  • Never display fewer than 2 tabs
  • Avoid changing the order of the tabs often. If your content changes frequently and needs to be selectively displayed, consider adopting a Filter pattern as in Product Display (

# Content

  • Order the tabs by priority or importance from left to right
  • Keep tab labels short and meaningful. Between 1-2 words is best and written in plain language
  • Ensure that each tab label is unique
  • Never truncate tab labels
  • Use title caps for tab labels
  • Tab headers can be animated, but tab content should not be

# Behavior

  • The first tab section is selected by default
  • Only one tab can be selected at a time
  • Currently selected tab is always highlighted
  • Tabs are scrollable by default and do not wrap to a second line
  • Tabs become scrollable when the length of the labels exceed the width of the container
  • Inactive tab panels are rendered for SEO purposes

# Do/Don't

tab with content displaying
Do display a tab section on load.
tab with empty content
Don't display tabs without a section visible.
tabs with two buttons
Do use tabs with at least 2 buttons.
tab with one button
Don't use tabs with only 1 button.
tabs with title cased labels
Do use title case for tab labels.
tabs with all caps labels
Don't use all caps for tab labels.
tabs with succint labels
Do write short and meaningful tab labels. Between 1-2 words is best.
tabs with truncated labels.
Don't truncate tab labels. If a label overruns the container, find a shorter alternative.

# Responsiveness

  • Tabs can change styles based on breakpoint
    • Example: Default at MD/LG, Compact and Full Width at XS/SM
  • Tabs labels never wrap to two lines
  • Scroll is set by default:
    • If tabs exceed width of viewport, a gradient is added to the end (right) of tab container
    • When scrolled to end of tabs, a gradient is added to the beginning (left) of tab container
  • Maintain layout for tabs when switching to smaller viewports. Do not replace the tab component with the accordion component
  • Switching between tab component and accordion component is not supported in Cedar components library

# Important

Linking to a specific tab or accordion has SEO costs. If you still wish to implement these changes for your project, reach out to the SEO team at the #team-seo and #team-ia Slack channels.


Tabs are built from two components: CdrTabs and CdrTabPanel. These are meant to be used together.

# Props

# CdrTabs







Sets height of the tabs container element. This is needed for managing content overflow and animations.







Sets the index of the tab that should be active on initial page load. Note that this property is zero-indexed.







Modifies the style variants for this component. Possible values: { 'centered' | 'compact' | 'full-width' | 'no-border' }

# CdrTabPanel







Sets tab display name. Required and must be unique for each tab. If id prop not provided, this value will be used as the reference identifier.







Sets reference identifier for tab content. This property is required and is necessary for accessibility. Must be unique for each tabPanel, and cannot be the same as the `aria-labelledby` property.







Sets reference identifier for tab header. This property is required and is necessary for accessibility. Must be unique for each tabPanel, and cannot be the same as the `id` property.

# Events



state, tabId


$emit event fired when the active tab has been changed.

# Usage

The cdr-tab-panel name property sets the tab display value and is used for reference.

   <cdr-tab-panel name="tab1">Tab 1 Content</cdr-tab-panel>

# Modifiers

Following variants are available to the cdr-tabs modifier attribute:

Value Description
'centered' Centers the tab header content
'compact' Sets the tabs styling for smaller screen sizes
'full-width' Sets the tab header to display evenly across the entire width instead of left justified
'no-border' Removes the bottom border of the tabs header