SidebarSectionLabel

Stable
WCAG 2.2 evidence
RTL

Heading text of a group of sidebar items. Presentational: renders in React Server Components and reads the enclosing Sidebar's variant and collapsed state from CSS, not from React context. In the collapsed rail the text is visually hidden and a 32 px divider is drawn instead. Accessibility: on its own it is plain text. Use SidebarSection label="…" to group items: the section is a group named by this label, so screen readers announce the grouping that the label shows visually (WCAG 1.3.1). Consumer duty: short, unique section names.

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

Loading example…

4
examples: 2
props: 2
live controls: 1
platform: 3
WCAG criteria: 0
blocks use 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…

label

variant

Generated code

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

<SidebarSectionLabel />

Examples 3

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

In section

Usual use through SidebarSection, which makes a group named by the label. Expanded and collapsed: in the rail the label becomes a divider and stays the group's name.

Loading example…

app.tsx

import { Sidebar, SidebarItem, SidebarSection } from "@nexera-ui/react";
import { LuChartColumn, LuTarget } from "react-icons/lu";

export function InSection() {
  return (
    <div className="flex flex-wrap items-start gap-4">
      {(["brand", "light"] as const).flatMap((variant) =>
        [false, true].map((isCollapsed) => (
          <Sidebar
            key={`${variant}${String(isCollapsed)}`}
            variant={variant}
            isCollapsed={isCollapsed}
            isCollapsible={false}
            aria-label={`${variant} ${isCollapsed ? "rail" : "sidebar"}`}
            className="h-auto"
          >
            <SidebarSection label="Insights">
              <SidebarItem href="#reports" icon={<LuChartColumn />} label="Reports" />
              <SidebarItem href="#performance" icon={<LuTarget />} label="Performance" />
            </SidebarSection>
          </Sidebar>
        )),
      )}
    </div>
  );
}

Long label

Long section names wrap.

Loading example…

app.tsx

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

<SidebarSectionLabel label="Reports and analytics for line managers" />;

Right to left

Right to left.

Loading example…

app.tsx

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

<SidebarSectionLabel label="Workspace" />;

Props 2

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

label*Nexera

ReactNode

Section name, a short noun such as "Reports". It wraps instead of truncating.

variantNexera

"brand" | "light"

Colour scheme. When omitted the label follows the enclosing Sidebar (Brand outside one).

* 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

2 direct · 1 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.12Text SpacingLevel AA · supporting test
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:.

Usage

<SidebarSectionLabel className="shadow-sm" />

Used in blocks

No block uses SidebarSectionLabel yet.

Theme studio

SidebarSectionLabel

Try every prop. Copy the code.

Examples 3

In section

Long label

Right to left

Props 2

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components