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 Group
const HorizontalTabGroup = () => (
<PlusTabGroup>
<PlusTab value="1" active>Home</PlusTab>
<PlusTab value="2"><i class="fa fa-cog"></i> Settings</PlusTab>
<PlusTab value="3"><i class="fa fa-info-circle"></i> About</PlusTab>
<PlusTabPanel value="1" active>Welcome to the homepage.</PlusTabPanel>
<PlusTabPanel value="2">Adjust your settings here.</PlusTabPanel>
<PlusTabPanel value="3">Learn more about us.</PlusTabPanel>
</PlusTabGroup>
);
// Vertical Tab Group
const VerticalTabGroup = () => (
<PlusTabGroup kind="vertical">
<PlusTab value="1" active>Overview</PlusTab>
<PlusTab value="2"><i class="fa fa-chart-line"></i> Reports</PlusTab>
<PlusTab value="3"><i class="fa fa-users"></i> Team</PlusTab>
<PlusTabPanel value="1" active>Here is the project overview.</PlusTabPanel>
<PlusTabPanel value="2">Review the latest reports.</PlusTabPanel>
<PlusTabPanel value="3">Meet our team members.</PlusTabPanel>
</PlusTabGroup>
);
export default {
HorizontalTabGroup,
VerticalTabGroup,
};
<!-- Horizontal Tab Group -->
<plus-tab-group>
<plus-tab value="1" active>Home</plus-tab>
<plus-tab value="2"><i class="fa fa-cog"></i> Settings</plus-tab>
<plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
<plus-tab-panel value="1" active>Welcome to the homepage.</plus-tab-panel>
<plus-tab-panel value="2">Adjust your settings here.</plus-tab-panel>
<plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
</plus-tab-group>
<!-- Vertical Tab Group -->
<plus-tab-group kind="vertical">
<plus-tab value="1" active>Overview</plus-tab>
<plus-tab value="2"><i class="fa fa-chart-line"></i> Reports</plus-tab>
<plus-tab value="3"><i class="fa fa-users"></i> Team</plus-tab>
<plus-tab-panel value="1" active>Here is the project overview.</plus-tab-panel>
<plus-tab-panel value="2">Review the latest reports.</plus-tab-panel>
<plus-tab-panel value="3">Meet our team members.</plus-tab-panel>
</plus-tab-group>
<template>
<!-- Horizontal Tab Group -->
<plus-tab-group>
<plus-tab value="1" active>Home</plus-tab>
<plus-tab value="2"><i class="fa fa-cog"></i> Settings</plus-tab>
<plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
<plus-tab-panel value="1" active>Welcome to the homepage.</plus-tab-panel>
<plus-tab-panel value="2">Adjust your settings here.</plus-tab-panel>
<plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
</plus-tab-group>
<!-- Vertical Tab Group -->
<plus-tab-group kind="vertical">
<plus-tab value="1" active>Overview</plus-tab>
<plus-tab value="2"><i class="fa fa-chart-line"></i> Reports</plus-tab>
<plus-tab value="3"><i class="fa fa-users"></i> Team</plus-tab>
<plus-tab-panel value="1" active>Here is the project overview.</plus-tab-panel>
<plus-tab-panel value="2">Review the latest reports.</plus-tab-panel>
<plus-tab-panel value="3">Meet our team members.</plus-tab-panel>
</plus-tab-group>
</template>
<!-- Horizontal Tab Group -->
<plus-tab-group>
<plus-tab value="1" active>Home</plus-tab>
<plus-tab value="2"><i class="fa fa-cog"></i> Settings</plus-tab>
<plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
<plus-tab-panel value="1" active>Welcome to the homepage.</plus-tab-panel>
<plus-tab-panel value="2">Adjust your settings here.</plus-tab-panel>
<plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
</plus-tab-group>
<!-- Vertical Tab Group -->
<plus-tab-group kind="vertical">
<plus-tab value="1" active>Overview</plus-tab>
<plus-tab value="2"><i class="fa fa-chart-line"></i> Reports</plus-tab>
<plus-tab value="3"><i class="fa fa-users"></i> Team</plus-tab>
<plus-tab-panel value="1" active>Here is the project overview.</plus-tab-panel>
<plus-tab-panel value="2">Review the latest reports.</plus-tab-panel>
<plus-tab-panel value="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 Disabled
const EntireGroupDisabled = () => (
<PlusTabGroup disabled> {/* All tabs are disabled */}
<PlusTab value="1">Home</PlusTab>
<PlusTab value="2" active><i class="fa fa-cog"></i> Settings</PlusTab>
<PlusTab value="3"><i class="fa fa-info-circle"></i> About</PlusTab>
<PlusTabPanel value="1">Welcome to the homepage.</PlusTabPanel>
<PlusTabPanel value="2" active>Adjust your settings here.</PlusTabPanel>
<PlusTabPanel value="3">Learn more about us.</PlusTabPanel>
</PlusTabGroup>
);
// Individual Tab Disabled
const IndividualTabDisabled = () => (
<PlusTabGroup> {/* Only one tab is disabled */}
<PlusTab value="1" disabled>Home</PlusTab>
<PlusTab value="2" active><i class="fa fa-cog"></i> Settings</PlusTab>
<PlusTab value="3"><i class="fa fa-info-circle"></i> About</PlusTab>
<PlusTabPanel value="1">This tab is disabled.</PlusTabPanel>
<PlusTabPanel value="2" active>Adjust your settings here.</PlusTabPanel>
<PlusTabPanel value="3">Learn more about us.</PlusTabPanel>
</PlusTabGroup>
);
export default {
EntireGroupDisabled,
IndividualTabDisabled,
};
<!-- Entire Tab Group Disabled -->
<plus-tab-group disabled> <!-- All tabs are disabled -->
<plus-tab value="1">Home</plus-tab>
<plus-tab value="2" active><i class="fa fa-cog"></i> Settings</plus-tab>
<plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
<plus-tab-panel value="1">Welcome to the homepage.</plus-tab-panel>
<plus-tab-panel value="2" active>Adjust your settings here.</plus-tab-panel>
<plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
</plus-tab-group>
<!-- Individual Tab Disabled -->
<plus-tab-group> <!-- Only one tab is disabled -->
<plus-tab value="1" disabled>Home</plus-tab>
<plus-tab value="2" active><i class="fa fa-cog"></i> Settings</plus-tab>
<plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
<plus-tab-panel value="1">This tab is disabled.</plus-tab-panel>
<plus-tab-panel value="2" active>Adjust your settings here.</plus-tab-panel>
<plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
</plus-tab-group>
<template>
<!-- Entire Tab Group Disabled -->
<plus-tab-group disabled> <!-- All tabs are disabled -->
<plus-tab value="1">Home</plus-tab>
<plus-tab value="2" active><i class="fa fa-cog"></i> Settings</plus-tab>
<plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
<plus-tab-panel value="1">Welcome to the homepage.</plus-tab-panel>
<plus-tab-panel value="2" active>Adjust your settings here.</plus-tab-panel>
<plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
</plus-tab-group>
<!-- Individual Tab Disabled -->
<plus-tab-group> <!-- Only one tab is disabled -->
<plus-tab value="1" disabled>Home</plus-tab>
<plus-tab value="2" active><i class="fa fa-cog"></i> Settings</plus-tab>
<plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
<plus-tab-panel value="1">This tab is disabled.</plus-tab-panel>
<plus-tab-panel value="2" active>Adjust your settings here.</plus-tab-panel>
<plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
</plus-tab-group>
</template>
<!-- Entire Tab Group Disabled -->
<plus-tab-group disabled> <!-- All tabs are disabled -->
<plus-tab value="1">Home</plus-tab>
<plus-tab value="2" active><i class="fa fa-cog"></i> Settings</plus-tab>
<plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
<plus-tab-panel value="1">Welcome to the homepage.</plus-tab-panel>
<plus-tab-panel value="2" active>Adjust your settings here.</plus-tab-panel>
<plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
</plus-tab-group>
<!-- Individual Tab Disabled -->
<plus-tab-group> <!-- Only one tab is disabled -->
<plus-tab value="1" disabled>Home</plus-tab>
<plus-tab value="2" active><i class="fa fa-cog"></i> Settings</plus-tab>
<plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
<plus-tab-panel value="1">This tab is disabled.</plus-tab-panel>
<plus-tab-panel value="2" active>Adjust your settings here.</plus-tab-panel>
<plus-tab-panel value="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 Group
const SmallTabGroup = () => (
<PlusTabGroup size="sm">
<PlusTab value="1">Overview</PlusTab>
<PlusTab value="2">Details</PlusTab>
<PlusTab value="3">Settings</PlusTab>
<PlusTabPanel value="1">Here is an overview.</PlusTabPanel>
<PlusTabPanel value="2">Detailed information.</PlusTabPanel>
<PlusTabPanel value="3">Configure your settings here.</PlusTabPanel>
</PlusTabGroup>
);
// Medium Size Tab Group
const MediumTabGroup = () => (
<PlusTabGroup size="md">
<PlusTab value="1">Home</PlusTab>
<PlusTab value="2">Profile</PlusTab>
<PlusTab value="3">Messages</PlusTab>
<PlusTabPanel value="1">Welcome home.</PlusTabPanel>
<PlusTabPanel value="2">Edit your profile here.</PlusTabPanel>
<PlusTabPanel value="3">Read your messages.</PlusTabPanel>
</PlusTabGroup>
);
// Large Size Tab Group
const LargeTabGroup = () => (
<PlusTabGroup size="lg">
<PlusTab value="1">Dashboard</PlusTab>
<PlusTab value="2">Reports</PlusTab>
<PlusTab value="3">Analytics</PlusTab>
<PlusTabPanel value="1">View your dashboard.</PlusTabPanel>
<PlusTabPanel value="2">Check your reports.</PlusTabPanel>
<PlusTabPanel value="3">Analyze your data.</PlusTabPanel>
</PlusTabGroup>
);
export default {
SmallTabGroup,
MediumTabGroup,
LargeTabGroup,
};
<!-- Small Size Tab Group -->
<plus-tab-group size="sm">
<plus-tab value="1">Overview</plus-tab>
<plus-tab value="2">Details</plus-tab>
<plus-tab value="3">Settings</plus-tab>
<plus-tab-panel value="1">Here is an overview.</plus-tab-panel>
<plus-tab-panel value="2">Detailed information.</plus-tab-panel>
<plus-tab-panel value="3">Configure your settings here.</plus-tab-panel>
</plus-tab-group>
<!-- Medium Size Tab Group -->
<plus-tab-group size="md">
<plus-tab value="1">Home</plus-tab>
<plus-tab value="2">Profile</plus-tab>
<plus-tab value="3">Messages</plus-tab>
<plus-tab-panel value="1">Welcome home.</plus-tab-panel>
<plus-tab-panel value="2">Edit your profile here.</plus-tab-panel>
<plus-tab-panel value="3">Read your messages.</plus-tab-panel>
</plus-tab-group>
<!-- Large Size Tab Group -->
<plus-tab-group size="lg">
<plus-tab value="1">Dashboard</plus-tab>
<plus-tab value="2">Reports</plus-tab>
<plus-tab value="3">Analytics</plus-tab>
<plus-tab-panel value="1">View your dashboard.</plus-tab-panel>
<plus-tab-panel value="2">Check your reports.</plus-tab-panel>
<plus-tab-panel value="3">Analyze your data.</plus-tab-panel>
</plus-tab-group>
<template>
<!-- Small Size Tab Group -->
<plus-tab-group size="sm">
<plus-tab value="1">Overview</plus-tab>
<plus-tab value="2">Details</plus-tab>
<plus-tab value="3">Settings</plus-tab>
<plus-tab-panel value="1">Here is an overview.</plus-tab-panel>
<plus-tab-panel value="2">Detailed information.</plus-tab-panel>
<plus-tab-panel value="3">Configure your settings here.</plus-tab-panel>
</plus-tab-group>
<!-- Medium Size Tab Group -->
<plus-tab-group size="md">
<plus-tab value="1">Home</plus-tab>
<plus-tab value="2">Profile</plus-tab>
<plus-tab value="3">Messages</plus-tab>
<plus-tab-panel value="1">Welcome home.</plus-tab-panel>
<plus-tab-panel value="2">Edit your profile here.</plus-tab-panel>
<plus-tab-panel value="3">Read your messages.</plus-tab-panel>
</plus-tab-group>
<!-- Large Size Tab Group -->
<plus-tab-group size="lg">
<plus-tab value="1">Dashboard</plus-tab>
<plus-tab value="2">Reports</plus-tab>
<plus-tab value="3">Analytics</plus-tab>
<plus-tab-panel value="1">View your dashboard.</plus-tab-panel>
<plus-tab-panel value="2">Check your reports.</plus-tab-panel>
<plus-tab-panel value="3">Analyze your data.</plus-tab-panel>
</plus-tab-group>
</template>
<plus-tab-group size="sm">
<plus-tab value="1"> Lorem Ipsum </plus-tab>
<plus-tab value="2"><i class="fa fa-home"></i> Dolor Sit </plus-tab>
<plus-tab value="3"><i class="fa fa-home"></i> Amet </plus-tab>
<plus-tab-panel value="1"> Lorem ipsum dolor sit amet </plus-tab-panel>
<plus-tab-panel value="2"> Dolor sit amet consectetur adipisicing elit. </plus-tab-panel>
<plus-tab-panel value="3"> Amet consectetur adipisicing elit. </plus-tab-panel>
</plus-tab-group>
<plus-tab-group size="md">
<plus-tab value="1"> Lorem Ipsum </plus-tab>
<plus-tab value="2"><i class="fa fa-home"></i> Dolor Sit </plus-tab>
<plus-tab value="3"><i class="fa fa-home"></i> Amet </plus-tab>
<plus-tab-panel value="1"> Lorem ipsum dolor sit amet </plus-tab-panel>
<plus-tab-panel value="2"> Dolor sit amet consectetur adipisicing elit. </plus-tab-panel>
<plus-tab-panel value="3"> Amet consectetur adipisicing elit. </plus-tab-panel>
</plus-tab-group>
<plus-tab-group size="lg">
<plus-tab value="1"> Lorem Ipsum </plus-tab>
<plus-tab value="2"><i class="fa fa-home"></i> Dolor Sit </plus-tab>
<plus-tab value="3"><i class="fa fa-home"></i> Amet </plus-tab>
<plus-tab-panel value="1"> Lorem ipsum dolor sit amet </plus-tab-panel>
<plus-tab-panel value="2"> Dolor sit amet consectetur adipisicing elit. </plus-tab-panel>
<plus-tab-panel value="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.
