Selection Indicator

A composable, spring-animated indicator that slides between the active item in any selection container — Tabs, ToggleGroup, navigation links, or your own custom markup.

Tabs

Drop SelectionIndicator as the last child of TabsList. Pass Class to each TabsTrigger to clear its individual active background so the indicator shows through.

Overview content

Segmented Control

A ToggleGroup in Single mode styled as a segmented control. Use Selector="[aria-checked=true]" — ToggleGroupItem marks selection via aria-checked rather than data-state.

Alignment: center

DropdownMenu Radio

Place SelectionIndicator inside DropdownMenuRadioGroup. The indicator slides vertically to highlight the checked item — works because SelectionIndicator now tracks top and height in addition to left and width.

DropdownMenu (Hover Only)

Regular menu items have no persistent selected state, so the indicator works purely in hover mode. Use HoverTarget to scope hover detection to "[role=menuitem]" so labels and separators are ignored. The indicator snaps instantly to the first hovered item and animates between items thereafter.

Pagination

PaginationLink sets aria-current="page" on the active page. Use Selector="[aria-current=page]" and suppress PaginationLink's own active background so the indicator shows through.

Page: 1 of 5

Navigation Underline

Use the Class parameter to override the default pill appearance. Here Class replaces the vertical inset and background with a thin bottom border that acts as an underline.

Active: Overview

Custom Container

SelectionIndicator works with any markup — not just NeoUI components. Set data-active="true" on whichever element should be active and add the indicator as a sibling. No context or event wiring needed.

Period: 1M

API Reference

SelectionIndicator parameters.

Prop	Type	Default	Description
Selector	string	[data-state=active]	CSS selector used to find the active element within the parent container.
Hover	bool	false	When true, the indicator also slides to the hovered item and snaps back on mouse leave.
Class	string?	—	Additional CSS classes. Use --si-height for underlines. Use data-[si-hover]: variants to style the hover state differently from the selected state.

Previous Select Next Separator