Skip to content

Feat/sidebar hover preview - #899

Open
sophiacalfred-uxdesign wants to merge 3 commits into
cloudflare:mainfrom
sophiacalfred-uxdesign:feat/sidebar-hover-preview
Open

sophiacalfred-uxdesign wants to merge 3 commits into
cloudflare:mainfrom
sophiacalfred-uxdesign:feat/sidebar-hover-preview

Conversation

@sophiacalfred-uxdesign

@sophiacalfred-uxdesign sophiacalfred-uxdesign commented Oct 28, 2026 •

Copy link
Copy Markdown

Title
feat(sidebar): add hover previews for nested collapsible content

Description
Fixes #[insert GH or internal issue link(s)].

Adds opt-in hover previews to Sidebar, so nested navigation is reachable without expanding sections inline — especially useful on the collapsed icon rail, which can't render nested content at all.

What's new

  • previewOnHover on Sidebar.Provider (default false). Hovering a closed Sidebar.Collapsible shows its CollapsibleContent in a floating popup instead of expanding inline. On the collapsed rail, sections preview regardless of open state.
  • Nested previews: triggers inside a popup open their own popup beside it, with consistent popup-to-popup gaps. Clicking any item dismisses the whole stack.
  • Popup title on the collapsed rail: the top-level popup names its parent (from the trigger's tooltip, or its text when omitted) and replaces the trigger's own tooltip. Styled like Sidebar.GroupLabel. Nested popups omit it.
  • Pointer-friendly alignment: every popup lines its first item up with the trigger, so the pointer can move straight across onto it.
  • Auto-labelled collapsed items: Sidebar.MenuButton falls back to its own text for the collapsed-rail tooltip when no tooltip is set, so every icon-only item gets a label.

Accessibility

Previews are a mouse-only affordance: the popup is aria-hidden and its contents are removed from the tab order. Keyboard and assistive-tech users keep the existing behaviour (inline expansion on focus).

Docs

New "Hover Preview" section and demo on the Sidebar page.


  • Reviews
    • bonk has reviewed the change
    • automated review not possible because:
  • Tests
    • Tests included/updated
    • Automated tests not possible - manual testing has been completed as follows:

Sophia Alfred and others added 3 commits October 27, 2026 14:27
Gate previews behind `previewOnHover` on Sidebar.Provider, and preview
collapsed-rail sections regardless of open state. Title the top-level
popup from the trigger and suppress its tooltip so the two never
overlap. Fall back to a menu button's own text for its collapsed-rail
tooltip. Add a docs demo and section.
@clanky-the-clanker

Copy link
Copy Markdown

This pull request was not reviewed automatically because its author does not have write access to this repository. A maintainer with write access can start a review by commenting clanky review (or clanker review or @clanky-the-clanker review), optionally followed by instructions (e.g. clanky review focus on the retry logic).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant