Pluma
About
MCP Server
Getting started
Contributing
Breaking Changes
Changelog
Content
Icons
Motion
Style Utilities
Test Helpers
Tokens
Overview
Status
Accordion
AccordionGroup
Box
Card
CenterBaseline
Divider
EmptyState
Flex
FormLayout
Grid
InlineStack
Panel
Scrollable
Stack
Code
DescriptionList
Emphasis
Heading
List
Paragraph
Strong
Text
TextLabel
Truncated
Avatar
CodeBlock
Coin
Icon
Image
LabelIcon
Breadcrumbs
Link
NavItem
Page
Pagination
PlainLink
SideNav
Tabs
TabNav
Button
ButtonGroup
CloseButton
DropdownMenu
PlainButton
ToggleButton
Checkbox
CheckboxGroup
ColorPicker
Combobox
DatePicker
Form
JsonField
NumberField
OptionCard
OptionCardGroup
Radio
RadioGroup
Search
SegmentedControl
Select
Slider
TextArea
TextField
Toggle
Badge
DataTable
Filters
FormattedDateTime
FormattedRelativeTime
KeyboardShortcut
Label
ProgressBar
ProgressCircle
StatusIndicator
Table
Tag
Banner
PageLoader
SkeletonShape
SkeletonText
Snackbar
Spinner
Blanket
ConfirmationModal
Drawer
Modal
Modal manager
Popover
Tooltip
VisuallyHidden
Anti-patterns
Combobox with Add New
Density
Inline Form Controls
Refinement levers
Search with DropdownMenu
States
Voice
Ember Floating UI
Ember prop spreading
ModalPrimitive
PlumaProvider
PopoverPrimitive
Portal
React Yield
fly-alert
fly-badge
fly-btn
fly-card
fly-close
fly-label
fly-panel
fly-progress
fly-range
fly-spinner
fly-tag
Forms
Lists
Tailwind
Componentsv2.170.1
Iconsv1.15.0
MCPv0.8.18
Tokensv0.34.1

TabNav

Figma
Github
Storybook
Aria patternLegacy component

A navigation component to move between different views within the same page hierarchy.

Importing

The components can be imported via:

import { 
    TabNav, 
    TabNavList, 
    TabNavTab 
} from '@customerio/pluma-components/react';

For a tabbed navigation interface that consists of links, use PlumaTabNav. Similar to PlumaTabs, it accepts a tabs array of objects, though with a slightly altered interface. Instead of a value, the tab items require a href string with the target URL.

An activeTab value may be provided to TabNav, where the value should match the href of the active tab. Alternatively, isActive may be set on the tab object itself.

PlumaTabsPanel components are not necessary in this case, because the tabs are meant to navigate to different URLs, where the "tab content" is rendered via the routing library's outlet.

<TabNav
	tabs={[
		{ href: '#', text: 'Campaigns' },
		{ href: '#', text: 'Newsletters', isActive: true },
		{ href: '#', text: 'API Triggered Broadcasts' },
		{ href: '#', text: 'Transactional Messages' },
	]}
/>

PlumaTabNav supports the same options as PlumaTabs, including:

  • icons
  • badges
  • disabling tabs
  • panel variant
  • custom tabs
<TabNav
	tabs={[
		{ 
			href: '#', 
			text: 'Campaigns',
			icon: 'campaigns',
			badge: '123',
		},
		{ 
			href: '#', 
			text: 'Newsletters',
			icon: 'newsletter',
			isActive: true,
			badge: '5',
		},
		{ 
			href: '#', 
			text: 'Transactional Messages',
			icon: 'transactional-api',
			iconColor: 'caution',
		},
	]}    
/>

API

PlumaTabNav extends Tabs

activeTab  string | undefined

The currently active tab (the tab href to match a value from the tabs prop). This prop is optional: isActive may be specified on the tab items themselves.

isBorderless  boolean | undefined

Default:false

Whether the tab list should render without a border.

isDisabled  boolean | undefined

Whether all tabs should be disabled.

tabs  TabNavTabItem[] | undefined

Array of tab items to display.

tabsListAlignInline  "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | undefined

The alignInline argument passed through to the TabsList component. Controls alignment of the tabs in the inline axis.

unsafe_tabItemClassNames  string[] | undefined

Additional classes to apply to any of the tabs (each array item corresponding to the tabs array).

variant  "default" | "panel" | undefined

What style of tab to render.

TabNavTabItem

badge  string | undefined

Text content to show in a badge inside the tab.

href  string (required)

The URL for the tab's link.

icon  IconName | null | undefined

An icon to show in the tab.

isActive  boolean | undefined

Whether this tab is currently active/selected.

isDisabled  boolean | undefined

Whether this tab is disabled.

text  string (required)

The text content to show in the tab.

PlumaTabNavTab

badge  string | undefined

Text content to show in a badge inside the tab.

href  string (required)

The URL for the tab's link.

icon  IconName | null | undefined

An icon to show in the tab.

isActive  boolean | undefined

Whether this tab is currently active/selected.

isDisabled  boolean | undefined

Whether this tab is disabled.

On this page

Importing
API