@fluidkit/indicator

One element that moves to whichever item is hovered, pressed, focused or selected: a menu highlight, a tab thumb, a segmented control's pill. The items stay put; only the indicator moves, on springs that keep their speed when redirected, with a slight motion blur like in iOS. Works with any element, and with @fluidkit/blur glass.

Documentation · Changelog · Part of Fluid Kit

npm install @fluidkit/indicator

Add the indicator to the container, absolutely positioned and behind the items:

<div class="menu" role="menu">
  <span class="menu__highlight"></span>
  <button role="menuitem">Copy</button>
  <button role="menuitem">Share</button>
  <hr />
  <button role="menuitem">Delete</button>
</div>

.menu { position: relative; isolation: isolate; }
.menu__highlight { position: absolute; z-index: -1; background: rgb(127 127 127 / 0.2); }

import { createIndicator } from "@fluidkit/indicator";

createIndicator({
  container: document.querySelector(".menu"),
  indicator: document.querySelector(".menu__highlight"),
});

It follows the mouse or pen on hover, and a finger pressing across items (releasing on another item clicks it). For a selected item, like a tab, set rest; for full control, use trigger: "manual" and to(). See the documentation for options and the API.

React

@fluidkit/indicator/react has components (each part can render as your own element with render) and a useIndicator() hook for custom markup.

import { Indicator } from "@fluidkit/indicator/react";

<Indicator.Root value={tab} onValueChange={setTab} trigger="press">
  <Indicator.Thumb className="thumb" />
  <Indicator.Item value="overview">Overview</Indicator.Item>
  <Indicator.Item value="releases">Releases</Indicator.Item>
</Indicator.Root>

More in the documentation.

Vue

@fluidkit/indicator/vue has the same components (each part can render as the element in its slot with as-child) and a useIndicator() composable. Vue 3.5+.

<script setup lang="ts">
import { ref } from "vue";
import { Indicator } from "@fluidkit/indicator/vue";

const tab = ref("overview");
</script>

<template>
  <Indicator.Root v-model="tab" trigger="press">
    <Indicator.Thumb class="thumb" />
    <Indicator.Item value="overview">Overview</Indicator.Item>
    <Indicator.Item value="releases">Releases</Indicator.Item>
  </Indicator.Root>
</template>

More in the documentation.

Svelte

@fluidkit/indicator/svelte has the same components (each part can render an element of yours with a child snippet) and a useIndicator() function. Svelte 5.29+.

<script lang="ts">
  import { Indicator } from "@fluidkit/indicator/svelte";

  let tab = $state("overview");
</script>

<Indicator.Root bind:value={tab} trigger="press">
  <Indicator.Thumb class="thumb" />
  <Indicator.Item value="overview">Overview</Indicator.Item>
  <Indicator.Item value="releases">Releases</Indicator.Item>
</Indicator.Root>

More in the documentation.

License

MIT © Mikhail Mogilnikov. See LICENSE.