Immerse your users in a seamless and organized browsing experience with our Dynamic Tabs Component. This feature-rich element transforms navigation by allowing users to effortlessly switch between content sections, enhancing both functionality and aesthetics. Empower your interface with intuitive tabbed navigation that captivates and simplifies the user journey.
Anatomy
The Tabs Component is a visually dynamic navigation element, presenting users with a set of clickable tabs that correspond to different content sections. Each tab serves as a gateway to a distinct area of information, streamlining user interaction and navigation within your application.
Properties
Tailor the Tabs Component to suit your design vision. Customize properties such as color, size, and typography to ensure a seamless integration into your application's overall aesthetic. With adjustable parameters, you have the creative freedom to craft a tabbed interface that aligns with your brand identity.
Kinds
States
Size
Active
Horizontal
Default
Small
Horizontal default tab
Vertical
Hovered
Medium
Horizontal active tab
Pressed
Large
Vertical default tab
Disabled
Vertical active tab
Kinds
Horizontal tabs are a user interface element where tab items are arranged in a row, typically from left to right.
Vertical tabs organize tab items in a column, usually from top to bottom. Each tab represents a separate section or content view, and the vertical layout is effective when there is ample vertical space available.
import React from'react';import { PlusTabGroup, PlusTab, PlusTabPanel } from'@plusui/react';// Horizontal Tab GroupconstHorizontalTabGroup= () => ( <PlusTabGroup> <PlusTabvalue="1"active>Home</PlusTab> <PlusTabvalue="2"><iclass="fa fa-cog"></i> Settings</PlusTab> <PlusTabvalue="3"><iclass="fa fa-info-circle"></i> About</PlusTab> <PlusTabPanelvalue="1"active>Welcome to the homepage.</PlusTabPanel> <PlusTabPanelvalue="2">Adjust your settings here.</PlusTabPanel> <PlusTabPanelvalue="3">Learn more about us.</PlusTabPanel> </PlusTabGroup>);// Vertical Tab GroupconstVerticalTabGroup= () => ( <PlusTabGroupkind="vertical"> <PlusTabvalue="1"active>Overview</PlusTab> <PlusTabvalue="2"><iclass="fa fa-chart-line"></i> Reports</PlusTab> <PlusTabvalue="3"><iclass="fa fa-users"></i> Team</PlusTab> <PlusTabPanelvalue="1"active>Here is the project overview.</PlusTabPanel> <PlusTabPanelvalue="2">Review the latest reports.</PlusTabPanel> <PlusTabPanelvalue="3">Meet our team members.</PlusTabPanel> </PlusTabGroup>);exportdefault { HorizontalTabGroup, VerticalTabGroup,};
<!-- Horizontal Tab Group --><plus-tab-group> <plus-tabvalue="1"active>Home</plus-tab> <plus-tabvalue="2"><iclass="fa fa-cog"></i> Settings</plus-tab> <plus-tabvalue="3"><iclass="fa fa-info-circle"></i> About</plus-tab> <plus-tab-panelvalue="1"active>Welcome to the homepage.</plus-tab-panel> <plus-tab-panelvalue="2">Adjust your settings here.</plus-tab-panel> <plus-tab-panelvalue="3">Learn more about us.</plus-tab-panel></plus-tab-group><!-- Vertical Tab Group --><plus-tab-groupkind="vertical"> <plus-tabvalue="1"active>Overview</plus-tab> <plus-tabvalue="2"><iclass="fa fa-chart-line"></i> Reports</plus-tab> <plus-tabvalue="3"><iclass="fa fa-users"></i> Team</plus-tab> <plus-tab-panelvalue="1"active>Here is the project overview.</plus-tab-panel> <plus-tab-panelvalue="2">Review the latest reports.</plus-tab-panel> <plus-tab-panelvalue="3">Meet our team members.</plus-tab-panel></plus-tab-group>
<template><!-- Horizontal Tab Group --> <plus-tab-group> <plus-tabvalue="1"active>Home</plus-tab> <plus-tabvalue="2"><iclass="fa fa-cog"></i> Settings</plus-tab> <plus-tabvalue="3"><iclass="fa fa-info-circle"></i> About</plus-tab> <plus-tab-panelvalue="1"active>Welcome to the homepage.</plus-tab-panel> <plus-tab-panelvalue="2">Adjust your settings here.</plus-tab-panel> <plus-tab-panelvalue="3">Learn more about us.</plus-tab-panel> </plus-tab-group><!-- Vertical Tab Group --> <plus-tab-groupkind="vertical"> <plus-tabvalue="1"active>Overview</plus-tab> <plus-tabvalue="2"><iclass="fa fa-chart-line"></i> Reports</plus-tab> <plus-tabvalue="3"><iclass="fa fa-users"></i> Team</plus-tab> <plus-tab-panelvalue="1"active>Here is the project overview.</plus-tab-panel> <plus-tab-panelvalue="2">Review the latest reports.</plus-tab-panel> <plus-tab-panelvalue="3">Meet our team members.</plus-tab-panel> </plus-tab-group></template>
<!-- Horizontal Tab Group --><plus-tab-group> <plus-tabvalue="1"active>Home</plus-tab> <plus-tabvalue="2"><iclass="fa fa-cog"></i> Settings</plus-tab> <plus-tabvalue="3"><iclass="fa fa-info-circle"></i> About</plus-tab> <plus-tab-panelvalue="1"active>Welcome to the homepage.</plus-tab-panel> <plus-tab-panelvalue="2">Adjust your settings here.</plus-tab-panel> <plus-tab-panelvalue="3">Learn more about us.</plus-tab-panel></plus-tab-group><!-- Vertical Tab Group --><plus-tab-groupkind="vertical"> <plus-tabvalue="1"active>Overview</plus-tab> <plus-tabvalue="2"><iclass="fa fa-chart-line"></i> Reports</plus-tab> <plus-tabvalue="3"><iclass="fa fa-users"></i> Team</plus-tab> <plus-tab-panelvalue="1"active>Here is the project overview.</plus-tab-panel> <plus-tab-panelvalue="2">Review the latest reports.</plus-tab-panel> <plus-tab-panelvalue="3">Meet our team members.</plus-tab-panel></plus-tab-group>
States
Default tab state represents the normal, unselected condition of a tab within a tabbed interface.
Hovered tab state responds dynamically to user interaction. It showcase a subtle visual change, such as a color shift.
Pressed tab state is activated when a user clicks or taps on a tab, indicating that the selection is currently in progress.
Disabled tab state indicates that a tab is temporarily inactive or not selectable. Visually, it is often subdued to convey its inactive status, and users cannot interact with a disabled tab.
import React from'react';import { PlusTabGroup, PlusTab, PlusTabPanel } from'@plusui/react';// Entire Tab Group DisabledconstEntireGroupDisabled= () => ( <PlusTabGroupdisabled> {/* All tabs are disabled */} <PlusTabvalue="1">Home</PlusTab> <PlusTabvalue="2"active><iclass="fa fa-cog"></i> Settings</PlusTab> <PlusTabvalue="3"><iclass="fa fa-info-circle"></i> About</PlusTab> <PlusTabPanelvalue="1">Welcome to the homepage.</PlusTabPanel> <PlusTabPanelvalue="2"active>Adjust your settings here.</PlusTabPanel> <PlusTabPanelvalue="3">Learn more about us.</PlusTabPanel> </PlusTabGroup>);// Individual Tab DisabledconstIndividualTabDisabled= () => ( <PlusTabGroup> {/* Only one tab is disabled */} <PlusTabvalue="1"disabled>Home</PlusTab> <PlusTabvalue="2"active><iclass="fa fa-cog"></i> Settings</PlusTab> <PlusTabvalue="3"><iclass="fa fa-info-circle"></i> About</PlusTab> <PlusTabPanelvalue="1">This tab is disabled.</PlusTabPanel> <PlusTabPanelvalue="2"active>Adjust your settings here.</PlusTabPanel> <PlusTabPanelvalue="3">Learn more about us.</PlusTabPanel> </PlusTabGroup>);exportdefault { EntireGroupDisabled, IndividualTabDisabled,};
<!-- Entire Tab Group Disabled --><plus-tab-groupdisabled> <!-- All tabs are disabled --> <plus-tabvalue="1">Home</plus-tab> <plus-tabvalue="2"active><iclass="fa fa-cog"></i> Settings</plus-tab> <plus-tabvalue="3"><iclass="fa fa-info-circle"></i> About</plus-tab> <plus-tab-panelvalue="1">Welcome to the homepage.</plus-tab-panel> <plus-tab-panelvalue="2"active>Adjust your settings here.</plus-tab-panel> <plus-tab-panelvalue="3">Learn more about us.</plus-tab-panel></plus-tab-group><!-- Individual Tab Disabled --><plus-tab-group> <!-- Only one tab is disabled --> <plus-tabvalue="1"disabled>Home</plus-tab> <plus-tabvalue="2"active><iclass="fa fa-cog"></i> Settings</plus-tab> <plus-tabvalue="3"><iclass="fa fa-info-circle"></i> About</plus-tab> <plus-tab-panelvalue="1">This tab is disabled.</plus-tab-panel> <plus-tab-panelvalue="2"active>Adjust your settings here.</plus-tab-panel> <plus-tab-panelvalue="3">Learn more about us.</plus-tab-panel></plus-tab-group>
<template><!-- Entire Tab Group Disabled --> <plus-tab-groupdisabled> <!-- All tabs are disabled --> <plus-tabvalue="1">Home</plus-tab> <plus-tabvalue="2"active><iclass="fa fa-cog"></i> Settings</plus-tab> <plus-tabvalue="3"><iclass="fa fa-info-circle"></i> About</plus-tab> <plus-tab-panelvalue="1">Welcome to the homepage.</plus-tab-panel> <plus-tab-panelvalue="2"active>Adjust your settings here.</plus-tab-panel> <plus-tab-panelvalue="3">Learn more about us.</plus-tab-panel> </plus-tab-group><!-- Individual Tab Disabled --> <plus-tab-group> <!-- Only one tab is disabled --> <plus-tabvalue="1"disabled>Home</plus-tab> <plus-tabvalue="2"active><iclass="fa fa-cog"></i> Settings</plus-tab> <plus-tabvalue="3"><iclass="fa fa-info-circle"></i> About</plus-tab> <plus-tab-panelvalue="1">This tab is disabled.</plus-tab-panel> <plus-tab-panelvalue="2"active>Adjust your settings here.</plus-tab-panel> <plus-tab-panelvalue="3">Learn more about us.</plus-tab-panel> </plus-tab-group></template>
<!-- Entire Tab Group Disabled --><plus-tab-groupdisabled> <!-- All tabs are disabled --> <plus-tabvalue="1">Home</plus-tab> <plus-tabvalue="2"active><iclass="fa fa-cog"></i> Settings</plus-tab> <plus-tabvalue="3"><iclass="fa fa-info-circle"></i> About</plus-tab> <plus-tab-panelvalue="1">Welcome to the homepage.</plus-tab-panel> <plus-tab-panelvalue="2"active>Adjust your settings here.</plus-tab-panel> <plus-tab-panelvalue="3">Learn more about us.</plus-tab-panel></plus-tab-group><!-- Individual Tab Disabled --><plus-tab-group> <!-- Only one tab is disabled --> <plus-tabvalue="1"disabled>Home</plus-tab> <plus-tabvalue="2"active><iclass="fa fa-cog"></i> Settings</plus-tab> <plus-tabvalue="3"><iclass="fa fa-info-circle"></i> About</plus-tab> <plus-tab-panelvalue="1">This tab is disabled.</plus-tab-panel> <plus-tab-panelvalue="2"active>Adjust your settings here.</plus-tab-panel> <plus-tab-panelvalue="3">Learn more about us.</plus-tab-panel></plus-tab-group>
Size
The size property in a tabs component allows you to adjust the visual dimensions of the tabs such as small, medium, large and custom to fit various design requirements.
import React from'react';import { PlusTabGroup, PlusTab, PlusTabPanel } from'@plusui/react';// Small Size Tab GroupconstSmallTabGroup= () => ( <PlusTabGroupsize="sm"> <PlusTabvalue="1">Overview</PlusTab> <PlusTabvalue="2">Details</PlusTab> <PlusTabvalue="3">Settings</PlusTab> <PlusTabPanelvalue="1">Here is an overview.</PlusTabPanel> <PlusTabPanelvalue="2">Detailed information.</PlusTabPanel> <PlusTabPanelvalue="3">Configure your settings here.</PlusTabPanel> </PlusTabGroup>);// Medium Size Tab GroupconstMediumTabGroup= () => ( <PlusTabGroupsize="md"> <PlusTabvalue="1">Home</PlusTab> <PlusTabvalue="2">Profile</PlusTab> <PlusTabvalue="3">Messages</PlusTab> <PlusTabPanelvalue="1">Welcome home.</PlusTabPanel> <PlusTabPanelvalue="2">Edit your profile here.</PlusTabPanel> <PlusTabPanelvalue="3">Read your messages.</PlusTabPanel> </PlusTabGroup>);// Large Size Tab GroupconstLargeTabGroup= () => ( <PlusTabGroupsize="lg"> <PlusTabvalue="1">Dashboard</PlusTab> <PlusTabvalue="2">Reports</PlusTab> <PlusTabvalue="3">Analytics</PlusTab> <PlusTabPanelvalue="1">View your dashboard.</PlusTabPanel> <PlusTabPanelvalue="2">Check your reports.</PlusTabPanel> <PlusTabPanelvalue="3">Analyze your data.</PlusTabPanel> </PlusTabGroup>);exportdefault { SmallTabGroup, MediumTabGroup, LargeTabGroup,};
<!-- Small Size Tab Group --><plus-tab-groupsize="sm"> <plus-tabvalue="1">Overview</plus-tab> <plus-tabvalue="2">Details</plus-tab> <plus-tabvalue="3">Settings</plus-tab> <plus-tab-panelvalue="1">Here is an overview.</plus-tab-panel> <plus-tab-panelvalue="2">Detailed information.</plus-tab-panel> <plus-tab-panelvalue="3">Configure your settings here.</plus-tab-panel></plus-tab-group><!-- Medium Size Tab Group --><plus-tab-groupsize="md"> <plus-tabvalue="1">Home</plus-tab> <plus-tabvalue="2">Profile</plus-tab> <plus-tabvalue="3">Messages</plus-tab> <plus-tab-panelvalue="1">Welcome home.</plus-tab-panel> <plus-tab-panelvalue="2">Edit your profile here.</plus-tab-panel> <plus-tab-panelvalue="3">Read your messages.</plus-tab-panel></plus-tab-group><!-- Large Size Tab Group --><plus-tab-groupsize="lg"> <plus-tabvalue="1">Dashboard</plus-tab> <plus-tabvalue="2">Reports</plus-tab> <plus-tabvalue="3">Analytics</plus-tab> <plus-tab-panelvalue="1">View your dashboard.</plus-tab-panel> <plus-tab-panelvalue="2">Check your reports.</plus-tab-panel> <plus-tab-panelvalue="3">Analyze your data.</plus-tab-panel></plus-tab-group>
<template><!-- Small Size Tab Group --> <plus-tab-groupsize="sm"> <plus-tabvalue="1">Overview</plus-tab> <plus-tabvalue="2">Details</plus-tab> <plus-tabvalue="3">Settings</plus-tab> <plus-tab-panelvalue="1">Here is an overview.</plus-tab-panel> <plus-tab-panelvalue="2">Detailed information.</plus-tab-panel> <plus-tab-panelvalue="3">Configure your settings here.</plus-tab-panel> </plus-tab-group><!-- Medium Size Tab Group --> <plus-tab-groupsize="md"> <plus-tabvalue="1">Home</plus-tab> <plus-tabvalue="2">Profile</plus-tab> <plus-tabvalue="3">Messages</plus-tab> <plus-tab-panelvalue="1">Welcome home.</plus-tab-panel> <plus-tab-panelvalue="2">Edit your profile here.</plus-tab-panel> <plus-tab-panelvalue="3">Read your messages.</plus-tab-panel> </plus-tab-group><!-- Large Size Tab Group --> <plus-tab-groupsize="lg"> <plus-tabvalue="1">Dashboard</plus-tab> <plus-tabvalue="2">Reports</plus-tab> <plus-tabvalue="3">Analytics</plus-tab> <plus-tab-panelvalue="1">View your dashboard.</plus-tab-panel> <plus-tab-panelvalue="2">Check your reports.</plus-tab-panel> <plus-tab-panelvalue="3">Analyze your data.</plus-tab-panel> </plus-tab-group></template>
<plus-tab-groupsize="sm"> <plus-tabvalue="1"> Lorem Ipsum </plus-tab> <plus-tabvalue="2"><iclass="fa fa-home"></i> Dolor Sit </plus-tab> <plus-tabvalue="3"><iclass="fa fa-home"></i> Amet </plus-tab> <plus-tab-panelvalue="1"> Lorem ipsum dolor sit amet </plus-tab-panel> <plus-tab-panelvalue="2"> Dolor sit amet consectetur adipisicing elit. </plus-tab-panel> <plus-tab-panelvalue="3"> Amet consectetur adipisicing elit. </plus-tab-panel></plus-tab-group><plus-tab-groupsize="md"> <plus-tabvalue="1"> Lorem Ipsum </plus-tab> <plus-tabvalue="2"><iclass="fa fa-home"></i> Dolor Sit </plus-tab> <plus-tabvalue="3"><iclass="fa fa-home"></i> Amet </plus-tab> <plus-tab-panelvalue="1"> Lorem ipsum dolor sit amet </plus-tab-panel> <plus-tab-panelvalue="2"> Dolor sit amet consectetur adipisicing elit. </plus-tab-panel> <plus-tab-panelvalue="3"> Amet consectetur adipisicing elit. </plus-tab-panel></plus-tab-group><plus-tab-groupsize="lg"> <plus-tabvalue="1"> Lorem Ipsum </plus-tab> <plus-tabvalue="2"><iclass="fa fa-home"></i> Dolor Sit </plus-tab> <plus-tabvalue="3"><iclass="fa fa-home"></i> Amet </plus-tab> <plus-tab-panelvalue="1"> Lorem ipsum dolor sit amet </plus-tab-panel> <plus-tab-panelvalue="2"> Dolor sit amet consectetur adipisicing elit. </plus-tab-panel> <plus-tab-panelvalue="3"> Amet consectetur adipisicing elit. </plus-tab-panel></plus-tab-group>
Layout & Spacing
Achieve precision in design with our Tabs Component's flexible layout and spacing options. Define the placement, alignment, and spacing between tabs, allowing you to create a visually balanced and cohesive interface that meets your specific design requirements.
Light & Dark Mode
Seamlessly adapt to user preferences with our Tabs Component's built-in support for both light and dark modes. Enhance readability and aesthetics by effortlessly transitioning between these modes, ensuring a consistent and visually appealing experience across different environments.
Accessibility
Prioritize inclusivity with our Tabs Component's commitment to accessibility. Engineered with industry-leading standards, it guarantees a user-friendly experience for all individuals, including those with disabilities. Screen reader compatibility, keyboard navigation, and high contrast options make our Tabs Component accessible to a diverse user base.
Criteria
Description
Status
ARIA Attributes
Ensures ARIA attributes are allowed for an element's role
Passed
ARIA Roles
Ensures role attribute has an appropriate value for the element
Passed
ARIA-Hidden Elements
Ensures aria-hidden elements are not focusable nor contain focusable elements
Passed
Required ARIA Attributes
Ensures elements with ARIA roles have all required ARIA attributes
Passed
Role Attributes
Ensures all elements with a role attribute use a valid value
Passed
Valid Values
Ensures all ARIA attributes have valid values
Passed
Inline text spacing
Ensure that text spacing set through style attributes can be adjusted with custom stylesheets
Passed
Unique ID Attribute
Ensures every id attribute value is unique
Passed
Color Contrast
Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.
