fix(docs): submenu selected item indicator

[meyttee]

📝 Description

aligned the selected menu item and the indicator

⛳️ Current behavior (updates)

On scroll, the indicator of the selected item moves

🚀 New behavior

On scroll, the indicator of the selected item is fixed beside the item

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Summary by CodeRabbit

• Style
  • Improved layout positioning in the documentation table of contents for nested headings.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6728fb2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

Someone is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Added the CSS class "relative" to list items within the docs table of contents component for headings with level greater than 1. This is a styling-only modification that extends existing class pipelines without affecting component logic or rendering behavior.

Changes

Cohort / File(s)	Change Summary
Docs ToC Styling apps/docs/components/docs/toc.tsx	Added "relative" CSS class to list items for headings with level > 1

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Single file modified with a minimal, additive CSS class change
• No logic modifications or functional impact
• No new imports or dependencies introduced

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The pull request title 'fix(docs): submenu selected item indicator' is directly related to the changeset. The changes add a 'relative' CSS class to list items in the docs table of contents to fix the positioning of the selected item indicator during scrolling. The title accurately captures the main purpose of the fix and is concise and specific.
Description check	✅ Passed	The pull request description includes the main required sections from the template: a Description section explaining what was aligned, a Current behavior section describing the issue before the fix, and a New behavior section describing the expected behavior after the fix. The description is mostly complete and provides adequate context about the problem and solution, though the Breaking change section was left as a template comment rather than explicitly addressed.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6a3b027 and 6728fb2.

📒 Files selected for processing (1)

• apps/docs/components/docs/toc.tsx (1 hunks)

🔇 Additional comments (1)

apps/docs/components/docs/toc.tsx (1)

87-112: Correct fix for the indicator positioning issue!

Adding "relative" positioning to the parent <li> element is the proper solution. The before: pseudo-element uses before:absolute positioning (line 101), so it needs a positioned parent to anchor to. Without this, the indicator would position itself relative to a higher ancestor, causing it to move unexpectedly during scroll. This ensures the indicator remains fixed beside its corresponding list item.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Nov 3, 2025 4:17pm
heroui-sb	Ready	Preview	Comment	Nov 3, 2025 4:17pm

[pkg-pr-new]

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5868

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5868

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5868

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5868

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5868

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5868

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5868

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5868

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5868

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5868

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5868

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5868

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5868

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5868

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5868

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5868

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5868

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5868

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5868

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5868

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5868

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5868

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5868

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5868

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5868

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5868

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5868

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5868

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5868

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5868

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5868

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5868

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5868

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5868

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5868

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5868

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5868

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5868

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5868

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5868

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5868

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5868

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5868

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5868

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5868

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5868

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5868

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5868

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5868

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5868

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5868

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5868

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5868

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5868

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5868

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5868

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5868

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5868

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5868

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5868

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5868

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5868

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5868

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5868

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5868

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5868

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5868

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5868

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5868

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5868

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5868

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5868

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5868

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5868

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5868

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5868

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5868

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5868

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5868

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5868

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5868

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5868

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5868

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5868

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5868

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5868

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5868

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5868

commit: 6728fb2