'%3e%3cpath%20d='M19%2028.5C19%2025.9804%2020.0009%2023.5641%2021.7825%2021.7825C23.5641%2020.0009%2025.9804%2019%2028.5%2019C31.0196%2019%2033.4359%2020.0009%2035.2175%2021.7825C36.9991%2023.5641%2038%2025.9804%2038%2028.5C38%2031.0196%2036.9991%2033.4359%2035.2175%2035.2175C33.4359%2036.9991%2031.0196%2038%2028.5%2038C25.9804%2038%2023.5641%2036.9991%2021.7825%2035.2175C20.0009%2033.4359%2019%2031.0196%2019%2028.5Z'%20fill='%231ABCFE'/%3e%3cpath%20d='M0%2047.5C0%2044.9804%201.00089%2042.5641%202.78249%2040.7825C4.56408%2039.0009%206.98044%2038%209.5%2038H19V47.5C19%2050.0196%2017.9991%2052.4359%2016.2175%2054.2175C14.4359%2055.9991%2012.0196%2057%209.5%2057C6.98044%2057%204.56408%2055.9991%202.78249%2054.2175C1.00089%2052.4359%200%2050.0196%200%2047.5H0Z'%20fill='%230ACF83'/%3e%3cpath%20d='M19%200V19H28.5C31.0196%2019%2033.4359%2017.9991%2035.2175%2016.2175C36.9991%2014.4359%2038%2012.0196%2038%209.5C38%206.98044%2036.9991%204.56408%2035.2175%202.78249C33.4359%201.00089%2031.0196%200%2028.5%200L19%200Z'%20fill='%23FF7262'/%3e%3cpath%20d='M0%209.5C0%2012.0196%201.00089%2014.4359%202.78249%2016.2175C4.56408%2017.9991%206.98044%2019%209.5%2019H19V0H9.5C6.98044%200%204.56408%201.00089%202.78249%202.78249C1.00089%204.56408%200%206.98044%200%209.5H0Z'%20fill='%23F24E1E'/%3e%3cpath%20d='M0%2028.5C0%2031.0196%201.00089%2033.4359%202.78249%2035.2175C4.56408%2036.9991%206.98044%2038%209.5%2038H19V19H9.5C6.98044%2019%204.56408%2020.0009%202.78249%2021.7825C1.00089%2023.5641%200%2025.9804%200%2028.5H0Z'%20fill='%23A259FF'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1_137'%3e%3crect%20width='38'%20height='57'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e){kind=icon}
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.
PlumaTabNav supports the same options as PlumaTabs, including:
- icons, or images via
iconSrc - badges
- disabling tabs
panelvariant- custom tabs
API
PlumaTabNav extends Tabs
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.
Default:'nav'
What element or component should be rendered.
Array of tab items to display.
Text content to show in a badge inside the tab.
The URL for the tab's link.
An icon to show in the tab.
A color to apply to the icon. Ignored when iconSrc is set.
The source URL of a custom image icon to render in the tab, in place of icon.
When provided, this will be rendered using the Image component with icon sizing.
The image will always have alt="" as it is purely decorative - meaning comes from the tab text.
Default:true
Only applies when iconSrc is provided.
Whether the image should be rendered with a bounding box to match the size of a Pluma Icon.
For certain cases, such as a logo, you may want to set this to false to allow the image to render
at a larger size without the additional padding.
Whether this tab is currently active/selected.
Whether this tab is disabled.
The text content to show in the tab.
PlumaTabNavList extends InlineStack
Default:'div'
What element or component should be rendered.
Array of tab items to display.
Additional classes to apply to any of the tabs
(each array item corresponding to the tabs array).
PlumaTabNavTab extends Box
Default:'div'
What element or component should be rendered.
Text content to show in a badge inside the tab.
The URL for the tab's link.
An icon to show in the tab.
A color to apply to the icon. Ignored when iconSrc is set.
The source URL of a custom image icon to render in the tab, in place of icon.
When provided, this will be rendered using the Image component with icon sizing.
The image will always have alt="" as it is purely decorative - meaning comes from the tab text.
Default:true
Only applies when iconSrc is provided.
Whether the image should be rendered with a bounding box to match the size of a Pluma Icon.
For certain cases, such as a logo, you may want to set this to false to allow the image to render
at a larger size without the additional padding.
Whether this tab is currently active/selected.
Whether this tab is disabled.
When this flag is true, an a tag will be used instead of the provider's linkComponent, even if it exists.
Additionally, target="_blank" rel="noopener noreferrer" will be added automatically
This is passed into the provider's linkComponent.
It can be used by the link component implementation to handle replaceState instead of pushState
This allows turning off the automatic addition of target="_blank" rel="noopener noreferrer".
This can be used for links to other protocols like mailto: