feat: RAC NavigationTree by snowystinger · Pull Request #10404 · adobe/react-spectrum

snowystinger · 2026-07-31T05:21:29Z

Closes

Adds the RAC implementation of SideNav. Rewrites S2 to use that. Adds starter examples and docs page for new RAC.

Switches Docs SideNav over to our S2 SideNav.

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

rspbot · 2026-07-31T05:25:13Z

Build successful! 🎉

rspbot · 2026-07-31T06:17:02Z

Build successful! 🎉

rspbot · 2026-07-31T06:20:53Z

Build successful! 🎉

snowystinger · 2026-08-03T03:46:55Z

+
+  let defaultRef = useRef<HTMLDivElement>(null);
+  let mergedRef = mergeRefs(ref, defaultRef);
+  useEffect(() => {


Should we always try to scroll the current item into view whenever it changes? Should we have a prop to disable this behaviour entirely? should there be an option to only do it on mount and no other time?

Fyi, I believe scroll-on-mount should be handled more holistically with an integration of the upcoming scroll-initial-target CSS attribute. Ideally that would be a mechanic for all collections, and also integrate with virtualizer to push the item into persisted keys.

Related to this, Im also not quite sure whether the current key here is being persisted? How does Tree learn of the Items quasi selection state? Is it just through “current” always being kept in-sync with the focusedKey?

rspbot · 2026-08-03T04:08:59Z

Build successful! 🎉

rspbot · 2026-08-03T05:25:23Z

Build successful! 🎉

yihuiliao · 2026-08-05T23:40:08Z

since i have scrollbar's on, when you expand a section, the scrollbar appears shifting the chevron to the left. we have the same issue on our current docs but it feels less noticeable bc the chevron is always stable (since it's positioned on the left). should we consider adding a scrollbar-gutter to sidenav?

Good question, I'm going to see if design has an opinion. Tree sidesteps this issue because the expand button is on the left instead of where the scroll bar would appear

rspbot · 2026-08-11T00:46:17Z

Build successful! 🎉

rspbot · 2026-08-11T01:14:22Z

Build successful! 🎉

…mponent

rspbot · 2026-08-13T23:43:52Z

Build successful! 🎉

rspbot · 2026-08-13T23:46:18Z

Build successful! 🎉

rspbot · 2026-08-13T23:49:00Z

Build successful! 🎉

rspbot · 2026-08-13T23:49:02Z

## API Changes

react-aria-components

/react-aria-components:NavigationTree

+NavigationTree <T> {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean | FocusStrategy
+  children?: ReactNode | (T) => ReactNode
+  className?: ClassNameOrFunction<NavigationTreeRenderProps> = 'react-aria-NavigationTree'
+  defaultExpandedKeys?: Iterable<Key>
+  dependencies?: ReadonlyArray<any>
+  disabledKeys?: Iterable<Key>
+  expandedKeys?: Iterable<Key>
+  id?: string
+  items?: Iterable<T>
+  onExpandedChange?: (Set<Key>) => any
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, NavigationTreeRenderProps>
+  selectedRoute?: string | null
+  slot?: string | null
+  style?: StyleOrFunction<NavigationTreeRenderProps>
+}

/react-aria-components:NavigationTreeItem

+NavigationTreeItem <T extends {}> {
+  aria-label?: string
+  children: ReactNode
+  className?: ClassNameOrFunction<NavigationTreeItemRenderProps> = 'react-aria-NavigationTreeItem'
+  download?: boolean | string
+  hasChildItems?: boolean
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onClick?: (MouseEvent<FocusableElement>) => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  onPress?: (PressEvent) => void
+  onPressChange?: (boolean) => void
+  onPressEnd?: (PressEvent) => void
+  onPressStart?: (PressEvent) => void
+  onPressUp?: (PressEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, NavigationTreeItemRenderProps>
+  routerOptions?: RouterOptions
+  style?: StyleOrFunction<NavigationTreeItemRenderProps>
+  target?: HTMLAttributeAnchorTarget
+  textValue: string
+}

/react-aria-components:NavigationTreeItemContent

+NavigationTreeItemContent {
+  children: ChildrenOrFunction<NavigationTreeItemContentRenderProps>
+}

/react-aria-components:NavigationTreeSection

+NavigationTreeSection <T extends {}> {
+  aria-label?: string
+  children?: ReactNode | (T) => ReactElement
+  className?: string
+  dependencies?: ReadonlyArray<any>
+  id?: Key
+  items?: Iterable<T>
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>
+  style?: CSSProperties
+}

/react-aria-components:NavigationTreeHeader

+NavigationTreeHeader {
+  children?: ReactNode
+  className?: string
+  id?: string
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>
+  style?: CSSProperties
+}

/react-aria-components:NavigationTreeContext

+NavigationTreeContext {
+  UNTYPED
+}

/react-aria-components:NavigationTreeProps

+NavigationTreeProps <T> {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean | FocusStrategy
+  children?: ReactNode | (T) => ReactNode
+  className?: ClassNameOrFunction<NavigationTreeRenderProps> = 'react-aria-NavigationTree'
+  defaultExpandedKeys?: Iterable<Key>
+  dependencies?: ReadonlyArray<any>
+  disabledKeys?: Iterable<Key>
+  expandedKeys?: Iterable<Key>
+  id?: string
+  items?: Iterable<T>
+  onExpandedChange?: (Set<Key>) => any
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, NavigationTreeRenderProps>
+  selectedRoute?: string | null
+  slot?: string | null
+  style?: StyleOrFunction<NavigationTreeRenderProps>
+}

/react-aria-components:NavigationTreeRenderProps

+NavigationTreeRenderProps {
+  isEmpty: boolean
+  isFocusVisible: boolean
+  isFocused: boolean
+  state: TreeState<unknown>
+}

/react-aria-components:NavigationTreeItemProps

+NavigationTreeItemProps <T = {}> {
+  aria-label?: string
+  children: ReactNode
+  className?: ClassNameOrFunction<NavigationTreeItemRenderProps> = 'react-aria-NavigationTreeItem'
+  download?: boolean | string
+  hasChildItems?: boolean
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onClick?: (MouseEvent<FocusableElement>) => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  onPress?: (PressEvent) => void
+  onPressChange?: (boolean) => void
+  onPressEnd?: (PressEvent) => void
+  onPressStart?: (PressEvent) => void
+  onPressUp?: (PressEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, NavigationTreeItemRenderProps>
+  routerOptions?: RouterOptions
+  style?: StyleOrFunction<NavigationTreeItemRenderProps>
+  target?: HTMLAttributeAnchorTarget
+  textValue: string
+}

/react-aria-components:NavigationTreeItemRenderProps

+NavigationTreeItemRenderProps {
+  allowsDragging?: boolean
+  hasChildItems: boolean
+  id: Key
+  isCurrent: boolean
+  isCurrentAncestor: boolean
+  isDisabled: boolean
+  isDragging?: boolean
+  isDropTarget?: boolean
+  isExpanded: boolean
+  isFocusVisible: boolean
+  isFocusVisibleWithin: boolean
+  isFocused: boolean
+  isHovered: boolean
+  isPressed: boolean
+  isSelected: boolean
+  level: number
+  selectionBehavior: SelectionBehavior
+  selectionMode: SelectionMode
+  state: TreeState<unknown>
+}

/react-aria-components:NavigationTreeItemContentProps

+NavigationTreeItemContentProps {
+  children: ChildrenOrFunction<NavigationTreeItemContentRenderProps>
+}

/react-aria-components:NavigationTreeItemContentRenderProps

+NavigationTreeItemContentRenderProps {
+  allowsDragging?: boolean
+  hasChildItems: boolean
+  id: Key
+  isCurrent: boolean
+  isCurrentAncestor: boolean
+  isDisabled: boolean
+  isDragging?: boolean
+  isDropTarget?: boolean
+  isExpanded: boolean
+  isFocusVisible: boolean
+  isFocusVisibleWithin: boolean
+  isFocused: boolean
+  isHovered: boolean
+  isPressed: boolean
+  isSelected: boolean
+  level: number
+  selectionBehavior: SelectionBehavior
+  selectionMode: SelectionMode
+  state: TreeState<unknown>
+}

/react-aria-components:NavigationTreeSectionProps

+NavigationTreeSectionProps <T> {
+  aria-label?: string
+  children?: ReactNode | (T) => ReactElement
+  className?: string
+  dependencies?: ReadonlyArray<any>
+  id?: Key
+  items?: Iterable<T>
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>
+  style?: CSSProperties
+}

/react-aria-components:NavigationTreeHeaderProps

+NavigationTreeHeaderProps {
+  children?: ReactNode
+  className?: string
+  id?: string
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>
+  style?: CSSProperties
+}

rspbot · 2026-08-13T23:49:04Z

Agent Skills Changes

Added (2)

react-aria/skills/react-aria/references/components/NavigationTree.md $\color{green}{+831}$
s2/skills/react-spectrum-s2/references/react-aria/components/NavigationTree.md $\color{green}{+831}$

Modified (8)

react-aria/skills/index.json $\color{green}{+1}$
react-aria/skills/react-aria/SKILL.md $\color{green}{+1}$ $\color{red}{-1}$
react-aria/skills/react-aria/references/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
react-aria/skills/react-aria/references/llms.txt $\color{green}{+1}$
s2/skills/index.json $\color{green}{+1}$
s2/skills/react-spectrum-s2/references/components/SideNav.md $\color{green}{+2}$ $\color{red}{-2}$
s2/skills/react-spectrum-s2/references/react-aria/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
s2/skills/react-spectrum-s2/references/react-aria/llms.txt $\color{green}{+1}$

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/39e6f9a07d0b1a061678642e4b850e1d6e9998bc/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/39e6f9a07d0b1a061678642e4b850e1d6e9998bc/

devongovett · 2026-08-14T20:37:51Z

+}
+```
+
+## Sections


Nest the above sections under Content to match other pages

devongovett · 2026-08-14T20:38:30Z

+<ExampleSwitcher>
+  ```tsx render docs={docs.exports.NavigationTree} links={docs.links} props={[]} type="vanilla" files={["starters/docs/src/NavigationTree.tsx", "starters/docs/src/NavigationTree.css", "./RoutedNavigationTree.tsx"]}
+  "use client";
+  import {NavigationTree, NavigationTreeItem} from 'vanilla-starter/NavigationTree';


IMO the style is a bit heavy for a sidenav. Maybe we can make it a bit closer to what we have in S2 with the selection line

devongovett · 2026-08-14T20:39:25Z

+
+## API
+
+```tsx links={{NavigationTree: '#NavigationTree', NavigationTreeItem: '#NavigationTreeitem', NavigationTreeItemContent: '#NavigationTreeitemcontent', NavigationTreeSection: '#NavigationTreesection', NavigationTreeHeader: '#NavigationTreeheader', Link: 'Link'}}


Would be nice to have an anatomy diagram...

devongovett · 2026-08-14T20:40:22Z

+}
+```
+
+## Current route


noticed that you can't see the focus ring on the selected item with the current styles

devongovett

Nothing blocking if we want to merge for testing.

github-actions Bot added RAC S2 labels Jul 31, 2026

nwidynski reviewed Aug 2, 2026

View reviewed changes

Comment thread packages/react-aria-components/src/NavigationTree.tsx

snowystinger commented Aug 3, 2026

View reviewed changes

yihuiliao reviewed Aug 5, 2026

View reviewed changes

snowystinger added the ready for review label Aug 6, 2026

snowystinger changed the title ~~feat: RAC SideNav~~ feat: RAC NavigationTree Aug 13, 2026

snowystinger force-pushed the rac-sidenav branch from bed8ca5 to 44e1689 Compare August 13, 2026 23:39

snowystinger added 8 commits August 14, 2026 09:41

feat: RAC SideNav

7f7adc0

fix ts

be3c293

fix again

058fa1a

Convert docs to use S2 SideNav and move scrolling logic inside the co…

0264fa4

…mponent

fix tests

0103d53

remove api not supported

5bb0dfe

remove disabled docs section

663e43a

Rename RAC SideNav to NavigationTree

39e6f9a

snowystinger force-pushed the rac-sidenav branch from 44e1689 to 39e6f9a Compare August 13, 2026 23:42

devongovett reviewed Aug 14, 2026

View reviewed changes

devongovett approved these changes Aug 14, 2026

View reviewed changes


		## API

		```tsx links={{NavigationTree: '#NavigationTree', NavigationTreeItem: '#NavigationTreeitem', NavigationTreeItemContent: '#NavigationTreeitemcontent', NavigationTreeSection: '#NavigationTreesection', NavigationTreeHeader: '#NavigationTreeheader', Link: 'Link'}}

Uh oh!

Conversation

snowystinger commented Jul 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Jul 31, 2026

Uh oh!

rspbot commented Jul 31, 2026

Uh oh!

rspbot commented Jul 31, 2026

Uh oh!

Uh oh!

snowystinger Aug 3, 2026

Choose a reason for hiding this comment

Uh oh!

nwidynski Aug 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Aug 3, 2026

Uh oh!

rspbot commented Aug 3, 2026

Uh oh!

Uh oh!

yihuiliao Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snowystinger Aug 11, 2026

Choose a reason for hiding this comment

Uh oh!

rspbot commented Aug 11, 2026

Uh oh!

rspbot commented Aug 11, 2026

Uh oh!

rspbot commented Aug 13, 2026

Uh oh!

rspbot commented Aug 13, 2026

Uh oh!

rspbot commented Aug 13, 2026

Uh oh!

rspbot commented Aug 13, 2026

react-aria-components

/react-aria-components:NavigationTree

/react-aria-components:NavigationTreeItem

/react-aria-components:NavigationTreeItemContent

/react-aria-components:NavigationTreeSection

/react-aria-components:NavigationTreeHeader

/react-aria-components:NavigationTreeContext

/react-aria-components:NavigationTreeProps

/react-aria-components:NavigationTreeRenderProps

/react-aria-components:NavigationTreeItemProps

/react-aria-components:NavigationTreeItemRenderProps

/react-aria-components:NavigationTreeItemContentProps

/react-aria-components:NavigationTreeItemContentRenderProps

/react-aria-components:NavigationTreeSectionProps

/react-aria-components:NavigationTreeHeaderProps

Uh oh!

rspbot commented Aug 13, 2026

Agent Skills Changes

Uh oh!

devongovett Aug 14, 2026

Choose a reason for hiding this comment

Uh oh!

devongovett Aug 14, 2026

Choose a reason for hiding this comment

Uh oh!

devongovett Aug 14, 2026

Choose a reason for hiding this comment

Uh oh!

devongovett Aug 14, 2026

Choose a reason for hiding this comment

Uh oh!

devongovett left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

snowystinger commented Jul 31, 2026 •

edited

Loading

nwidynski Aug 3, 2026 •

edited

Loading

yihuiliao Aug 5, 2026 •

edited

Loading