Tab
Elevate User Experience with Our Dynamic Tabs Component
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.
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,
};
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,
};
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,
};
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.
ARIA Attributes
Ensures ARIA attributes are allowed for an element's role
ARIA Roles
Ensures role attribute has an appropriate value for the element
ARIA-Hidden Elements
Ensures aria-hidden elements are not focusable nor contain focusable elements
Required ARIA Attributes
Ensures elements with ARIA roles have all required ARIA attributes
Role Attributes
Ensures all elements with a role attribute use a valid value
Valid Values
Ensures all ARIA attributes have valid values
Inline text spacing
Ensure that text spacing set through style attributes can be adjusted with custom stylesheets
Unique ID Attribute
Ensures every id attribute value is unique
Color Contrast
Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.
Design System
API
kind
Sets the orientation of the tab group
String
horizontal, vertical
horizontal
active
The value of the active tab
String
Any valid tab value
null
disabled
Disables the entire tab group
Boolean
true, false
false
size
Determines the size of the tab group
String
sm, md, lg
md
Last updated
Was this helpful?