Organizes related content into groups for people to navigate between

import { CdrTabs, CdrTabPanel } from '@rei/cedar'

When to use

  • 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

When not to use

  • Grouping content to display vertically. Instead, use accordion
  • Creating primary navigation that links to other pages
  • Comparing related content. Instead, use a table
  • 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 this product display example
Do
Tab with content correctly displaying on load

Do display a tab section on load.

Don't
Tab incorrectly displaying with empty content

Don't display tabs without a section visible.

Do
Tabs correctly displaying the minimum two buttons.

Do use tabs with at least 2 buttons.

Don't
Tab incorrectly displaying with only one button.

Don't use tabs with only 1 button.

  • Order the tabs by priority or importance from left to right
  • Ensure each tab label is unique
  • Never truncate tab labels
  • Tab headers can be animated, but tab content shouldn't
Do
Tabs labeled correctly in title case.

Do use title case for tab labels.

Don't
Tabs labeled incorrectly with all caps

Don't use all caps for tab labels.

Do
Tabs with correct concise labels, for example Features.

Do write short and meaningful tab labels. Between 1-2 words is best.

Don't
abs with incorrectly truncated labels,for example Technical followed by an ellipsis.

Don't truncate tab labels. If a label overruns the container, find a shorter alternative.

  • The first tab section is selected by default
  • Only one tab can be selected at a time
  • The tab currently selected 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
  • Tabs can change styles based on breakpoint: 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

What Cedar provides

  • Uses 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

Development responsibilities

When using this component, here's what you are responsible for:

  • 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

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

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>

CdrTabs

Props

NameTypeDefault
height

Sets height of the tabs container element. Passing a `px` value will render tabs with a static height, passing `auto` will render tabs with variable height based on content size.

string'240px'
activeTab

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

number0
modifier

Modifies the style variants for this component Possible values: centered, compact, full-width, no-border

string
size

Use `small` to reduce spacing around the tabs for a denser visual design Possible values: small

string
backgroundColor

Sets the background color of the tab. For CdrTabs that are rendered on non-primary backgrounds. Pass the background-color into the component to ensure that the scrolling gradients render correctly.

stringCdrColorBackgroundPrimary

Slots

Name
default

CdrTabs content (CdrTabPanel components)

CdrTabPanel

Props

NameTypeDefault
id

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.

string
name

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

string
ariaLabelledby

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.

string

Slots

Name
default

CdrTabPanel content

Events

NameParameters
tab-change

Emits when active tab is changed

state, panelId