Indicator for Menu (and other lists), like Tabs.Indicator
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Feature request
## Summary
Tabs.Indicator is great — a single element that follows the active item, with CSS variables for position and size, so the highlight can be styled and animated without putting a background on every item.
It would be useful on other list-style components too, especially Menu. Highlighted items already expose data-highlighted; what’s missing is a first-class indicator that tracks that item the way Tabs.Indicator tracks the active tab.
Two shapes that would both work:
1. Menu.Indicator (and the same idea on similar components)
2. A shared Highlight primitive that any of these lists could compose
Happy to follow whatever API you already use for Tabs. The main ask is not having to reimplement item tracking, measurement, and scroll/resize updates in userland.
## Examples in other libraries
https://base-ui.com/react/components/tabs#indicator
## Motivation
I want to enhance the interaction of other list-style components to with an animateable element. For now, I've created my own Base UI-flavored Highlight component, but it would be great to have something more native. Whether built into other components like Tabs, or a standalone component.
Contributor guide
Research direction
Start by reading the existing Tabs.Indicator API and implementation, then compare how Menu exposes its highlighted item. Done means providing a documented indicator API for Menu or a shared list primitive that tracks the highlighted item and handles measurement, scrolling, and resizing as described.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100