SidebarSubItem

Stable
WCAG 2.2 evidence
RTL

Second-level link of a sidebar group. Place it as a child of a group SidebarItem, which shows it while expanded. Built on React Aria Link: Tab reaches it, Enter follows it, keyboard focus shows the 2 px ring, and isCurrent sets aria-current="page" (WCAG 2.1.1, 2.4.7, 4.1.2). The current page is shown by the bold label and the indicator-coloured guide as well as by the fill (1.4.1). Not rendered in the collapsed rail: mark the parent SidebarItem as current there. Rows are 32 px tall (2.5.8). Consumer duties: labels matching page titles; at most two levels (use page tabs for a third).

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

Loading example…

5
examples: 24
props: 4
live controls: 1
platform: 8
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…

label

isCurrentfalse

variant

isDisabledfalse

Generated code

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

<SidebarSubItem />

Examples 4

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

Current

Figma State=Selected (isCurrent): bold label, indicator-coloured guide and the selected fill.

Loading example…

app.tsx

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

<SidebarSubItem href="#directory" label="Directory" isCurrent />;

Light

Figma Variant=Light.

Loading example…

app.tsx

import { Sidebar, SidebarItem, SidebarSubItem } from "@nexera-ui/react";
import { LuUsers } from "react-icons/lu";

export function Light() {
  return (
    <Sidebar variant="light" isCollapsible={false} aria-label="Sidebar" className="h-auto">
      <SidebarItem icon={<LuUsers />} label="People" defaultExpanded>
        <SidebarSubItem href="#directory" label="Directory" isCurrent />
        <SidebarSubItem href="#teams" label="Teams" />
      </SidebarItem>
    </Sidebar>
  );
}

Long label

Long labels wrap.

Loading example…

app.tsx

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

<SidebarSubItem href="#directory" label="Organisation chart and reporting lines" />;

Right to left

Right to left: the guide moves to the right.

Loading example…

app.tsx

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

<SidebarSubItem href="#directory" label="Directory" />;

Props 24

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

href*Nexera

string

Destination of the link.

label*Nexera

ReactNode

Visible label and accessible name: one or two words matching the page title. It wraps instead of truncating.

isCurrentNexera

boolean

The sub-item is the current page: aria-current="page", bold label, the guide in the indicator colour and the selected fill.

variantNexera

"brand" | "light"

Colour scheme.

classNameNexera

string

Extra classes, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style.

isDisabledReact Aria

boolean

Whether the link is disabled.

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.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

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.

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.

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

* 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 · 3 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · supporting test
1.4.4Resize TextLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.4Link Purpose (In Context)Level 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-current
data-disabled
data-hovered
data-pressed

Usage

<SidebarSubItem className="data-current:opacity-90 shadow-sm" />

Used in blocks

Sidebar app shellApp shells and navigation

Theme studio

SidebarSubItem

Try every prop. Copy the code.

Examples 4

Current

Light

Long label

Right to left

Props 24

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components