MenuSectionLabel

Stable
WCAG 2.2 evidence
RTL
Web · iOS · Android

Heading of a group of menu items. Render it as the first child of a MenuSection: React Aria then labels the section's group with it, so screen readers announce the group name when focus enters it (WCAG 1.3.1, 4.1.2). Not focusable; the arrow keys skip it. Use section labels to group related actions; skip them in single-group menus.

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

Loading example…

3
examples: 3
props: 2
live controls: 3
platforms: 4
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

platform

Generated code

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

<MenuSectionLabel />

Examples 2

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

Groups

Two groups, each named by its label, separated by a divider.

Loading example…

app.tsx

import { type ReactNode } from "react";
import { AriaMenu, type AriaMenuProps } from "react-aria-components";
import {
  MenuDivider,
  MenuItem,
  MenuSection,
  MenuSectionLabel,
  menuListStyles,
  menuPopoverStyles,
  usePlatform,
} from "@nexera-ui/react";

function StaticMenu({
  platform: platformProp,
  children,
  ...props
}: { platform?: Platform | undefined; children: ReactNode } & Omit<
  AriaMenuProps<object>,
  "children"
>) {
  const platform = usePlatform(platformProp);
  return (
    <div data-platform={platform} className={menuPopoverStyles({ platform })}>
      <MenuPlatformContext.Provider value={platform}>
        <AriaMenu className={menuListStyles({ platform })} {...props}>
          {children}
        </AriaMenu>
      </MenuPlatformContext.Provider>
    </div>
  );
}

export function Groups() {
  return (
    <StaticMenu aria-label="View options" selectionMode="single" defaultSelectedKeys={["name"]}>
      <MenuSection>
        <MenuSectionLabel label="Sort by" />
        <MenuItem id="name" label="Name" />
        <MenuItem id="date" label="Date modified" />
      </MenuSection>
      <MenuDivider />
      <MenuSection selectionMode="multiple" defaultSelectedKeys={["hidden"]}>
        <MenuSectionLabel label="Show" />
        <MenuItem id="hidden" label="Hidden files" />
        <MenuItem id="extensions" label="File extensions" />
      </MenuSection>
    </StaticMenu>
  );
}

Platforms

On iOS and Android the label lines up with the row text.

Loading example…

app.tsx

import { type ReactNode } from "react";
import { AriaMenu, type AriaMenuProps } from "react-aria-components";
import {
  MenuItem,
  MenuSection,
  MenuSectionLabel,
  menuListStyles,
  menuPopoverStyles,
  usePlatform,
} from "@nexera-ui/react";

const platforms = ["web", "ios", "android"] as const;

function StaticMenu({
  platform: platformProp,
  children,
  ...props
}: { platform?: Platform | undefined; children: ReactNode } & Omit<
  AriaMenuProps<object>,
  "children"
>) {
  const platform = usePlatform(platformProp);
  return (
    <div data-platform={platform} className={menuPopoverStyles({ platform })}>
      <MenuPlatformContext.Provider value={platform}>
        <AriaMenu className={menuListStyles({ platform })} {...props}>
          {children}
        </AriaMenu>
      </MenuPlatformContext.Provider>
    </div>
  );
}

export function Platforms() {
  return (
    <div className="flex flex-wrap items-start gap-6">
      {platforms.map((platform) => (
        <StaticMenu key={platform} aria-label={`Sort (${platform})`} platform={platform}>
          <MenuSection>
            <MenuSectionLabel label="Sort by" />
            <MenuItem id="name" label="Name" />
            <MenuItem id="date" label="Date modified" />
          </MenuSection>
        </StaticMenu>
      ))}
    </div>
  );
}

Props 3

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

label*Nexera

ReactNode

Visible heading of the group, for example "Sort by". It names the section's group.

platformNexera

"web" | "ios" | "android"

Platform look. Figma has a section label for web only; on iOS and Android the padding follows the item rows. Defaults to the platform of the enclosing Menu, then of the NexeraProvider.

classNameNexera

string

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

* 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

3 direct · 1 supporting

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

Usage

<MenuSectionLabel className="shadow-sm" />

Used in blocks

No block uses MenuSectionLabel yet.

Theme studio

MenuSectionLabel

Try every prop. Copy the code.

Examples 2

Groups

Platforms

Props 3

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components