VerticalTab

Stable
WCAG 2.2 evidence
RTL

One tab of a vertical tab list, for settings-style pages. Use it inside <Tabs orientation="vertical"> and a TabList: React Aria Tab gives role tab with aria-selected, the up and down arrows move between tabs, Home and End jump to the ends, and Tab moves into the panel (WCAG 2.1.1, 4.1.2). Disabled tabs are skipped. The selected tab shows a fill, a heavier label and an indicator bar (1.4.1); keyboard focus shows the ring (2.4.7). Figma advises against it on narrow screens: switch to a drill-down list there. Consumer duties: short, translated labels.

import { VerticalTab } from "@nexera-ui/react";

Loading example…

3
examples: 22
props: 1
live controls: 1
platform: 9
WCAG criteria: 1
block uses it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

isDisabledfalse

Generated code

import { VerticalTab } from "@nexera-ui/react";

<VerticalTab />

Examples 2

The same examples as Storybook, rendered live. Open Code to copy one.

Long label

Long labels wrap inside the 220 px tab instead of truncating; the tab grows taller.

Loading example…

app.tsx

import { TabList, TabPanel, Tabs, VerticalTab } from "@nexera-ui/react";
import { LuBell, LuLock } from "react-icons/lu";

export function LongLabel() {
  return (
    <Tabs orientation="vertical" defaultSelectedKey="approvals">
      <TabList aria-label="Notification settings">
        <VerticalTab
          id="approvals"
          label="Approvals, payroll reminders and leave requests"
          icon={<LuBell />}
        />
        <VerticalTab id="security" label="Security" icon={<LuLock />} />
      </TabList>
      <TabPanel id="approvals">Approvals, payroll reminders and leave requests.</TabPanel>
    </Tabs>
  );
}

Right to left

Right-to-left: the icon and the indicator bar move to the right edge.

Loading example…

app.tsx

import { TabList, TabPanel, Tabs, VerticalTab } from "@nexera-ui/react";
import { LuBell, LuUser } from "react-icons/lu";

export function RightToLeft() {
  return (
    <Tabs orientation="vertical" defaultSelectedKey="profile">
      <TabList aria-label="الإعدادات">
        <VerticalTab id="profile" label="الملف الشخصي" icon={<LuUser />} />
        <VerticalTab id="notifications" label="الإشعارات" icon={<LuBell />} />
      </TabList>
      <TabPanel id="profile">الاسم والصورة وبيانات الاتصال.</TabPanel>
    </Tabs>
  );
}

Props 22

Press "Try it" on a card to load that prop into the playground.

id*Nexera

Key

Key of the tab. The TabPanel with the same id is the panel it shows.

label*Nexera

VisibleContent

Visible label, for example "Notifications". It names the tab and wraps instead of truncating.

iconNexera

ReactNode

Icon before the label. 18 px, decorative; shown when provided.

classNameNexera

string

Extra classes, merged last so they win over the defaults (for example w-full to fill a side column).

styleNexera

CSSProperties

Inline style.

isDisabledReact Aria

boolean

Whether the tab is disabled.

aria-labelReact Aria

string

Defines a string value that labels the current element.

aria-labelledbyReact Aria

string

Identifies the element (or elements) that labels the current element.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

hrefReact Aria

string

A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).

hrefLangReact Aria

string

Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).

targetReact Aria

HTMLAttributeAnchorTarget

The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).

relReact Aria

string

The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).

downloadReact Aria

string | boolean

Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).

pingReact Aria

string

A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).

referrerPolicyReact Aria

"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"

How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).

routerOptionsReact Aria

never

Options for the configured client side router.

onPressReact Aria

(e: PressEvent) => void

Handler that is called when the press is released over the target.

onPressStartReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction starts.

onPressEndReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

onPressChangeReact Aria

(isPressed: boolean) => void

Handler that is called when the press state changes.

onPressUpReact Aria

(e: PressEvent) => void

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

5 direct · 4 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.3.2Meaningful SequenceLevel A · supporting test
1.4.1Use of ColorLevel A · supporting test
1.4.10ReflowLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · tested directly
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-hovered
data-selected

Usage

<VerticalTab className="data-disabled:opacity-90 shadow-sm" />

Used in blocks

Settings layoutApp shells and navigation

Theme studio

VerticalTab

Try every prop. Copy the code.

Examples 2

Long label

Right to left

Props 22

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components