Limelight Nav

import { LimelightNav } from '@hanzo/ui'

Default

An uncontrolled floating pill; the glow slides to whichever item you click.

export function Default() {
  return <LimelightNav items={items} defaultValue="docs" />
}

Controlled

The active item lives in your own state, so other UI can drive it too.

export function Controlled() {
  const [value, setValue] = useState("overview")
  return (
    <YStack gap="$3">
      <LimelightNav items={items} value={value} onValueChange={setValue} />
    </YStack>
  )
}

Bar

The full-width page-navigation shape, a hairline instead of a floating pill.

export function Bar() {
  return <LimelightNav items={items} defaultValue="overview" variant="bar" />
}

With links

An item carrying an `href` renders as a real anchor.

Home Docs Blog

export function Links() {
  const linked: LimelightNavItem[] = [
    { id: "home", label: "Home", href: "/" },
    { id: "docs", label: "Docs", href: "/docs" },
    { id: "blog", label: "Blog", href: "/blog" },
  ]
  return <LimelightNav items={linked} defaultValue="home" />
}

Types

export type LimelightNavItem = {
  id: string
  label: string
  icon?: React.ReactNode
  href?: string
}

export type LimelightNavVariant = 'floating' | 'bar'

export type LimelightNavProps = {
  items: LimelightNavItem[]
  /** Controlled active item id. */
  value?: string
  /** Uncontrolled initial active item id; defaults to the first item. */
  defaultValue?: string
  onValueChange?: (id: string) => void
  variant?: LimelightNavVariant
  'aria-label'?: string
}

Exports

LimelightNavtype LimelightNavItemtype LimelightNavPropstype LimelightNavVariant