Skip to content

feat(NavMenu): add XDSNavHeadingMenu container with size and keyboard nav - #1999

Merged
cixzhang merged 4 commits into
mainfrom
navi/feat/xds-menu-primitive
May 3, 2026
Merged

feat(NavMenu): add XDSNavHeadingMenu container with size and keyboard nav#1999
cixzhang merged 4 commits into
mainfrom
navi/feat/xds-menu-primitive

Conversation

@cixzhang

@cixzhang cixzhang commented May 3, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds XDSNavHeadingMenu as an accessible menu container for nav heading popovers, and XDSNavHeadingMenuItem with size-aware padding.

Motivation

Ernest requested spacious nav menu items. The heading menus also needed a reasonable min-width. Currently, nav heading menu content is bare fragments — the heading itself owns the role="menu" container, keyboard wiring, and context provider. This PR extracts that into a composable container component.

What's new

XDSNavHeadingMenu — accessible menu container:

  • role="menu" with arrow key / Home / End / Escape keyboard navigation via useListFocus
  • size prop (sm | md | lg) controlling min-width (160/200/240px) and flowing to items via context
  • minWidth override for custom widths

XDSNavHeadingMenuItem — size-aware menu item:

  • Reads size from parent XDSNavHeadingMenu context for consistent padding
  • Same API as XDSNavMenuItem (icon, label, description, href, onClick, isDisabled)
  • Larger touch targets at lg size for spacious layouts

Migration

XDSNavMenuItem is preserved as a deprecated re-export of XDSNavHeadingMenuItem. Codemod to follow in a separate PR after checking internal impact.

Usage

<XDSSideNavHeading
  heading="Products"
  menu={
    <XDSNavHeadingMenu size="lg">
      <XDSNavHeadingMenuItem label="Dashboard" href="/dashboard" />
      <XDSNavHeadingMenuItem label="Analytics" href="/analytics" />
    </XDSNavHeadingMenu>
  }
/>

Tests

18 new tests covering:

  • Container rendering, size classes, data-testid, minWidth override
  • Item rendering (div vs link), onClick, disabled state, description
  • Keyboard navigation (arrow keys, wrap, Home/End)
  • Backward compat (XDSNavMenuItem === XDSNavHeadingMenuItem)

… nav

Adds XDSNavHeadingMenu as an accessible menu container for nav heading
popovers with:
- role="menu" + arrow key/Home/End/Escape keyboard navigation
- size prop (sm/md/lg) controlling min-width and flowing to items
- minWidth override for custom widths

Adds XDSNavHeadingMenuItem with size-aware padding from parent context.

XDSNavMenuItem is preserved as a deprecated re-export for backward
compat — codemod to follow in a separate PR.

Heading components updated to provide size in context.
@vercel

vercel Bot commented May 3, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
xds-sandbox Ready Ready Preview, Comment May 3, 2026 3:19pm

Request Review

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label May 3, 2026
@github-actions

github-actions Bot commented May 3, 2026

Copy link
Copy Markdown
Contributor

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

No new or modified components detected.

Bundle Size Summary

Package Size (ESM) Size (CJS) Gzipped
@xds/core 18.0KB 27.8KB 4.2KB

Accessibility Audit

Status: No accessibility violations detected.


Generated by PR Enrichment workflow | Storybook | Sandbox | View full report

Headings provide only closeMenu via XDSNavMenuCloseContext.
XDSNavHeadingMenu reads that and provides size + closeMenu via
XDSNavMenuContext. Clean separation of concerns — headings don't
know about menu sizing.
- XDSNavHeadingCloseContext — heading provides closeMenu
- XDSNavHeadingMenuContext — menu provides size + closeMenu to items

Both scoped to their owner with matching XDSNavHeading* prefix.
@cixzhang
cixzhang merged commit 0580bb7 into main May 3, 2026
20 checks passed
@github-actions
github-actions Bot deleted the navi/feat/xds-menu-primitive branch May 4, 2026 07:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Meta Open Source bot.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant