Plus UI ↗️ Be Our Sponsor ↗️

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.

anatomy of tabs component

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.

KindsStatesSizeActive

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.

layout and spacing of tabs component

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.

light and dark mode of tabs component

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.

CriteriaDescriptionStatus

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.

AA ~ AAA

Design System

LogoPlus UI Design System | Figma CommunityFigma
Plus UI Design System on Figma

API

PropertyDescriptionTypeAccepted ValuesDefault

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

PreviousSelectNextTextarea

Last updated