Skip to main content
Design system

Tabs

Tabs are used to navigate between sections of content in the same area without reloading the page.

Bundle size: 0
Install: 
npm install @washingtonpost/wpds-ui-kit
|Copy
Usage: 
import { Tabs } from "@washingtonpost/wpds-ui-kit"
|Copy
Source:  View on Github

Table of Contents

Anatomy

Note: Image is not to scale

  1. Tab
  2. Selection indicator
  3. Icon (optional)
  4. Tab bar

Options

Selection

This option indicates whether a tab is selected (and thereby showing content) or not.

Icon

This option determines whether an icon is included or not.

Alignment

This option determines whether the tabs are left or center aligned along the tab bar.

Density

This option determines the overall size of the component: compact, default, or loose.

Behavior

Hover

Hovering over an unselected tab causes a lighter selection bar to appear below.

Icon placement

Don't put icons on the right.

Edit this page on GitHub.