Tabs

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

# Overview

# Default (Medium)

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

# Compact (Small)

Reduced spacing around the tab buttons to create a denser visual design.

# Full Width

Tab buttons space evenly across the container.

# No Border

Bottom border of tab header list is removed.

# Centered

Centered tab header content

# 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 is lengthy and 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 Data Tables

# The Basics

  • Never display disabled tab labels
  • Remove tab button if there is no content
  • Keep to no more than 6 tab buttons
  • Never display fewer than 2 tab buttons

# Content

  • Order the tab buttons 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

# 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

# API

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

# Props

# CdrTabs

height

name

string

type

240px

default

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

modifier

name

string

type

N/A

default

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

# CdrTabPanel

name

name

string

type

N/A

default

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.

id

name

string

type

N/A

default

Sets reference identifier. Must be unique for each tab.

# Events

tab-change

name

state, tabId

arguments

$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-tabs>
   <cdr-tab-panel name="tab1">Tab 1 Content</cdr-tab-panel>
 </cdr-tabs>
1
2
3

# 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