Glide highlight

Pro

A box drawn behind a list of items (a menu's items, a sidebar's places, a row of tabs) that moves to the one under the pointer and to the one with keyboard focus, and takes its size. It is aria-hidden, under the items' text, never takes a press (pointer-events: none), and goes when the pointer leaves and nothing inside has focus. The items' own hover and focus styles stay; the box only adds a travelling fill.

It is drawn only when a brand sets --cd-draw-highlight (glide, ease, bouncy, slow or pop, from the Pro motion-drawings item), so an app without that choice sees exactly what it saw before. In forced colours it is hidden, and the items' own hover and focus styles carry the state.

Render it inside the container containerRef points at; the container becomes its containing block (AppSidebar, DropdownMenu, Tabs and NavRail do this for you). Items are found by itemSelector from where the pointer or focus is.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1, 2.6.2, 2.7.0, 2.8.0, 2.9.0, 2.10.0, 3.0.0, 4.0.0, 4.0.1, 4.0.2, 4.1.0, 4.2.0 and 4.3.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/glide-highlight

Brings in: motion, tokens, utils

Usage

TSX · The example above

"use client"

import * as React from "react"
import { GlideHighlight } from "@/components/candor/ui/glide-highlight"

const ways = ["glide", "ease", "bouncy", "slow", "pop"] as const

export default function Example() {
  const list = React.useRef<HTMLDivElement>(null)
  const [way, setWay] = React.useState<(typeof ways)[number]>("glide")
  return (
    // A brand turns the box on with --cd-draw-highlight (here on the wrapper; usually on :root in the brand file).
    <div className="flex flex-col gap-3" style={{ "--cd-draw-highlight": way } as React.CSSProperties}>
      <label className="flex items-center gap-2 text-xs text-muted-foreground">
        --cd-draw-highlight
        <select value={way} onChange={(e) => setWay(e.target.value as (typeof ways)[number])} className="rounded-md border bg-background px-2 py-1 text-xs text-foreground">
          {ways.map((w) => (
            <option key={w}>{w}</option>
          ))}
        </select>
      </label>
      <div ref={list} className="w-56 rounded-lg border p-1 text-sm">
        <GlideHighlight containerRef={list} itemSelector="button" />
        <ul>
        {["Overview", "Activity", "Members", "Settings"].map((label) => (
          <li key={label}>
            <button type="button" className="w-full rounded-md px-2 py-1.5 text-start outline-none focus-visible:ring-[3px] focus-visible:ring-ring/80">
              {label}
            </button>
          </li>
        ))}
        </ul>
      </div>
    </div>
  )
}

<GlideHighlight>

Prop	Type	Default	Description
containerRefrequired	`React.RefObject<HTMLElement \| null>`	—	The element that holds the items. While the box is mounted it gets `position: relative` if it is static and `isolation: isolate` if it isn't isolated, so the box sits under the items; unmounting puts back what it had.
itemSelectorrequired	`string`	—	A CSS selector that matches one item ("[data-slot=dropdown-menu-item]"). The item is the closest match to where the pointer or focus is.
className	`string \| undefined`	—	Classes for the box, merged with Candor's.

Motion

Moment	Family	What it does
glide	move	The box behind a list's items travels to the item under the pointer and takes its size. It is drawn only when the brand turns it on, starts in place, goes straight to an item reached with the keyboard, and jumps under reduced motion.

Set with --cd-motion-glide-highlight-<moment>-* in your brand file; the families are in the design reference.