docs: update side nav #9178

yihuiliao · 2025-11-13T00:56:25Z

Put Internationalized into the sidenav under React Aria - we are only planning on having two top-level domains (react-spectrum.adobe.com and react-aria.adobe.com), and putting it in the sidenav makes it more visible. It can stay where it is in the search menu.
Add Interactions and Utilities to the sidenav. These sections should be collapsed by default.
Add links to the Docs, Blog, and Releases (maybe Examples?) to the header next to the github link. We may need to shrink the search field a little (and expand it when entering the search menu).
- Blog and Releases should hide the sidenav.
Up for debate: Make the logo in the top-left a link to the home page instead of opening the search menu. This way you can get to the home page from anywhere (even on pages that don’t have the side nav, e.g. examples, blog, and releases).
Make the “Explore components” button on the home page open the search menu.
Rename “Getting started” category to “Overview”

✅ 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 · 2025-11-13T01:05:14Z

Build successful! 🎉

packages/dev/s2-docs/src/Header.tsx

snowystinger

I don't think I'm a fan of the Search opening directly to the getting started, I think it'd be more useful to open to the components or just All

yihuiliao · 2025-11-13T18:25:30Z

I don't think I'm a fan of the Search opening directly to the getting started, I think it'd be more useful to open to the components or just All

Where are you seeing that? Is it when you're switching libraries? The search should only open to "overview" if you're in that section. Otherwise, if you're on a component page and you open the search, it should open to "components". I've updated the code a bit so if you're on the react aria homepage and click on the "Explore components" button, it'll open to the components page

LFDanLu · 2025-11-13T23:44:45Z

packages/dev/s2-docs/pages/internationalized/date/Calendar.mdx

a more general question for the team I guess, but with regards to the internationalized pages, should they still redirect to /internationalized or say under react-aria ? I wonder if it is jarring to have the side nav change out from under you

yeah i wasn't sure what the url is going to look like. i assumed it would be something like 'react-aria.adobe.com/internationalized/...".

it might be weird with the side nav changing but at the same time, it is a separate library so i feel like it shouldn't include the react-aria stuff

we can debate whether it should be in the React Aria sidenav I guess. I think we wanted to make it a little more visible. Right now it's a little strange that it is there but then to get back to react aria you need to use the search menu. Ideally whatever we decide would be symmetrical I think.

packages/dev/s2-docs/src/Nav.tsx

LFDanLu · 2025-11-13T23:49:55Z

packages/dev/s2-docs/src/Header.tsx

-              <BetaApp />
-              <Text>Beta Preview</Text>
-            </Badge>
+            <ActionButton 


Are these buttons supposed to work on the build? I noticed they strip out the commit hash when clicking them so the page doesn't actually show up

Also should these buttons appear somewhere in the mobile experience? Or should the header logo button bring you back? I guess maybe the search menu is good enough on its own

rspbot · 2025-11-14T19:28:55Z

Build successful! 🎉

reidbarber · 2025-11-14T22:34:02Z

packages/dev/s2-docs/src/Header.tsx

          })}>
          <div className={style({justifySelf: 'start'})}>
-            <ActionButton
+            <Link


We might want to update the layout so the button is more aligned with the side nav content visually.

hah time to add LinkActionButton? 😂

reidbarber · 2025-11-14T22:35:33Z

packages/dev/s2-docs/src/Header.tsx

-            </Badge>
+            <Link className={renderProps => linkStyles({...renderProps})} href={docs} ref={docsRef} style={pressScale(docsRef)} >Docs</Link>
+            <Link className={renderProps => linkStyles({...renderProps})} href={release} ref={releasesRef} style={pressScale(releasesRef)} >Releases</Link>
+            <Link className={renderProps => linkStyles({...renderProps})} href={blog} target={subdirectory === 's2' ? '_blank' : ''} rel="noopener noreferrer" ref={blogRef} style={pressScale(blogRef)} >Blog</Link>


We might want to use the same Link + styles for the Github link

rspbot · 2025-11-14T22:43:23Z

Build successful! 🎉

rspbot · 2025-11-14T23:56:22Z

Build successful! 🎉

rspbot · 2025-11-15T00:31:45Z

Build successful! 🎉

devongovett

Looks great!

One nice thing to add would be for the current category in the sidenav to automatically expand. Right now if you navigate to a page in Utilities for example and then reload the page, Components is expanded but not Utilities. We could probably default the state to the current page's category.

devongovett · 2025-11-15T01:10:30Z

packages/dev/s2-docs/pages/internationalized/date/Calendar.mdx

we can debate whether it should be in the React Aria sidenav I guess. I think we wanted to make it a little more visible. Right now it's a little strange that it is there but then to get back to react aria you need to use the search menu. Ideally whatever we decide would be symmetrical I think.

devongovett · 2025-11-15T01:14:40Z

packages/dev/s2-docs/src/Header.tsx

+  let subdirectory = 's2';
+  if (library === 'internationalized' || library === 'react-aria') {
+    // the internationalized library has no homepage so i've chosen to route it to the react aria homepage
+    subdirectory = 'react-aria';


yeah this is another oddity about having it under react-aria 🤷

devongovett · 2025-11-15T01:15:01Z

packages/dev/s2-docs/src/Header.tsx

          })}>
          <div className={style({justifySelf: 'start'})}>
-            <ActionButton
+            <Link


hah time to add LinkActionButton? 😂

devongovett · 2025-11-15T01:20:21Z

packages/dev/s2-docs/src/SearchMenuWrapper.tsx

+
+  return (
+    <DialogTrigger isOpen={searchOpen} onOpenChange={() => {openSearchMenu();}} >
+      <Pressable><span role="button" className="no-underline bg-white/60 border border-black/10 bg-clip-padding text-base md:text-lg font-bold text-slate-800 px-8 py-3 rounded-full backdrop-saturate-150 backdrop-brightness-125 transition hover:bg-white/60 focus-ring  dark:outline-white outline-offset-2 active:scale-95">Explore Components</span></Pressable>


Any reason it can't be a RAC Button?

also tiny nit: add cursor-default so the text selection cursor doesn't come up

devongovett · 2025-11-15T01:22:03Z

packages/dev/s2-docs/src/SearchMenuWrapper.tsx

+      </ModalOverlay>
+    </DialogTrigger>
+  );
+}


We might need to adjust the view transition a little. Noticed that the search field doesn't fade out with the rest of the modal - I guess it's assuming there is a search on the page to transition to but there isn't in this case.

* update getting started to overview * hide side nav for release notes * hide blog from sidenav * add export group to add internationalize to react aria side nav * remove releases from react spectrum side nav * update side nav to include internationalized in react aria * explore component opens search menu * fix routing? * fix some stuff from merge conflict * pls fix lint * update github logo to link * fix lint * add back beta badge * fix lint

yihuiliao added 9 commits November 6, 2025 15:16

update getting started to overview

6b6a33f

hide side nav for release notes

23ef133

Merge branch 'main' into docs-side-nav

98d45fd

hide blog from sidenav

9a57b3f

Merge branch 'main' into docs-side-nav

d8a815f

add export group to add internationalize to react aria side nav

788c913

remove releases from react spectrum side nav

908ac17

update side nav to include internationalized in react aria

d89224b

explore component opens search menu

e9b694e

snowystinger reviewed Nov 13, 2025

View reviewed changes

packages/dev/s2-docs/src/Header.tsx Outdated Show resolved Hide resolved

snowystinger reviewed Nov 13, 2025

View reviewed changes

LFDanLu reviewed Nov 14, 2025

View reviewed changes

fix routing?

692c9a6

yihuiliao added 3 commits November 14, 2025 13:53

Merge branch 'main' into docs-side-nav

121490c

fix some stuff from merge conflict

fa106c9

pls fix lint

7abc5af

reidbarber reviewed Nov 14, 2025

View reviewed changes

Merge branch 'main' into docs-side-nav

5b35b8f

LFDanLu added release ready for review labels Nov 14, 2025

yihuiliao added 2 commits November 14, 2025 15:40

update github logo to link

33da276

fix lint

4d73ffd

yihuiliao added 2 commits November 14, 2025 16:17

add back beta badge

bd092eb

fix lint

2e6b06e

LFDanLu approved these changes Nov 15, 2025

View reviewed changes

devongovett approved these changes Nov 15, 2025

View reviewed changes

reidbarber approved these changes Nov 17, 2025

View reviewed changes

yihuiliao added this pull request to the merge queue Nov 17, 2025

Merged via the queue into main with commit f3b0f9c Nov 17, 2025
32 checks passed

yihuiliao deleted the docs-side-nav branch November 17, 2025 17:52

docs: update side nav #9178

docs: update side nav #9178

Conversation

yihuiliao commented Nov 13, 2025 • 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 Nov 13, 2025

Uh oh!

Uh oh!

snowystinger left a comment

Choose a reason for hiding this comment

Uh oh!

yihuiliao commented Nov 13, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Nov 14, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Nov 14, 2025

Uh oh!

rspbot commented Nov 14, 2025

Uh oh!

rspbot commented Nov 15, 2025

Uh oh!

devongovett left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

yihuiliao commented Nov 13, 2025 •

edited

Loading