LimelightNav

Smart navigation component with dynamic limelight highlighting and adaptive width. A JavaScript-powered React component for Next.js featuring TypeScript integration and shadcn/ui compatibility.

Loading component...

'use client';import React, { useState, useRef, useLayoutEffect, cloneElement } from 'react';import { cn } from '@/lib/utils';const DefaultHomeIcon = (props: React.SVGProps<SVGSVGElement>) => <svg {...props} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /></svg>;const DefaultCompassIcon = (props: React.SVGProps<SVGSVGElement>) => <svg {...props} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="m16.24 7.76-2.12 6.36-6.36 2.12 2.12-6.36 6.36-2.12z" /></svg>;const DefaultBellIcon = (props: React.SVGProps<SVGSVGElement>) => <svg {...props} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" /><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" /></svg>;export type NavItem = {  id: string | number;  icon: React.ReactElement;  label?: string;  onClick?: () => void;};const defaultNavItems: NavItem[] = [  { id: 'default-home', icon: <DefaultHomeIcon />, label: 'Home' },  { id: 'default-explore', icon: <DefaultCompassIcon />, label: 'Explore' },  { id: 'default-notifications', icon: <DefaultBellIcon />, label: 'Notifications' },];export type LimelightNavProps = {  items?: NavItem[];  defaultActiveIndex?: number;  onTabChange?: (index: number) => void;  className?: string;  limelightClassName?: string;  iconContainerClassName?: string;  iconClassName?: string;};/** * An adaptive-width navigation bar with a "limelight" effect that highlights the active item. */export const LimelightNav = ({  items = defaultNavItems,  defaultActiveIndex = 0,  onTabChange,  className,  limelightClassName,  iconContainerClassName,  iconClassName,}: LimelightNavProps) => {  const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);  const [isReady, setIsReady] = useState(false);  const navItemRefs = useRef<(HTMLAnchorElement | null)[]>([]);  const limelightRef = useRef<HTMLDivElement | null>(null);  useLayoutEffect(() => {    if (items.length === 0) return;    const limelight = limelightRef.current;    const activeItem = navItemRefs.current[activeIndex];        if (limelight && activeItem) {      const newLeft = activeItem.offsetLeft + activeItem.offsetWidth / 2 - limelight.offsetWidth / 2;      limelight.style.left = `${newLeft}px`;      if (!isReady) {        setTimeout(() => setIsReady(true), 50);      }    }  }, [activeIndex, isReady, items]);  if (items.length === 0) {    return null;   }  const handleItemClick = (index: number, itemOnClick?: () => void) => {    setActiveIndex(index);    onTabChange?.(index);    itemOnClick?.();  };  return (    <nav className={cn('relative inline-flex items-center h-16 rounded-lg bg-card text-foreground border px-2', className)}>      {items.map(({ id, icon, label, onClick }, index) => (          <a            key={id}            ref={el => { navItemRefs.current[index] = el; }}            className={cn('relative z-20 flex h-full cursor-pointer items-center justify-center p-5', iconContainerClassName)}            onClick={() => handleItemClick(index, onClick)}            aria-label={label}          >            {cloneElement(icon as React.ReactElement<any>, {              className: cn(                'w-6 h-6 transition-opacity duration-100 ease-in-out',                activeIndex === index ? 'opacity-100' : 'opacity-40',                (icon.props as any)?.className || '',                iconClassName || ''              ),            })}          </a>      ))}      <div         ref={limelightRef}        className={cn(          'absolute top-0 z-10 w-11 h-[5px] rounded-full bg-primary shadow-[0_50px_15px_var(--primary)]',          isReady ? 'transition-[left] duration-400 ease-in-out' : '',          limelightClassName        )}        style={{ left: '-999px' }}      >        <div className="absolute left-[-30%] top-[5px] w-[160%] h-14 [clip-path:polygon(5%_100%,25%_0,75%_0,95%_100%)] bg-gradient-to-b from-primary/30 to-transparent pointer-events-none" />      </div>    </nav>  );};

Installation

npx shadcn@latest add https://www.shadcn.io/registry/limelight-nav.json

npx shadcn@latest add https://www.shadcn.io/registry/limelight-nav.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/limelight-nav.json

bunx shadcn@latest add https://www.shadcn.io/registry/limelight-nav.json

Features

Free open source React component built for Next.js applications with zero licensing costs
Dynamic limelight effect that smoothly tracks active navigation items using advanced JavaScript calculations
TypeScript-first development with comprehensive type definitions and IntelliSense support
Adaptive width navigation that automatically adjusts to content with responsive design patterns
Tailwind CSS integration for seamless styling, custom theming, and consistent design systems
shadcn/ui compatibility following established component patterns and design conventions
Built-in default icons including Home, Explore, and Notifications with SVG optimization
Customizable icon system supporting any React element with proper component composition
Full accessibility support with ARIA labels, keyboard navigation, and screen reader compatibility
Performance optimized with efficient DOM manipulation and minimal re-renders
Responsive behavior that works seamlessly across all device sizes and orientations

Usage

import { LimelightNav, type NavItem } from '@/components/ui/limelight-nav';

// Basic usage with default icons
<LimelightNav />

// Custom navigation items
const navItems: NavItem[] = [
  { id: 'home', icon: <HomeIcon />, label: 'Home' },
  { id: 'profile', icon: <UserIcon />, label: 'Profile' }
];

<LimelightNav items={navItems} onTabChange={(index) => console.log('Tab:', index)} />

Examples

Loading component...

'use client';import React, { useState, useRef, useLayoutEffect, cloneElement } from 'react';import { cn } from '@/lib/utils';const DefaultHomeIcon = (props: React.SVGProps<SVGSVGElement>) => <svg {...props} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /></svg>;const DefaultCompassIcon = (props: React.SVGProps<SVGSVGElement>) => <svg {...props} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="m16.24 7.76-2.12 6.36-6.36 2.12 2.12-6.36 6.36-2.12z" /></svg>;const DefaultBellIcon = (props: React.SVGProps<SVGSVGElement>) => <svg {...props} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" /><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" /></svg>;export type NavItem = {  id: string | number;  icon: React.ReactElement;  label?: string;  onClick?: () => void;};const defaultNavItems: NavItem[] = [  { id: 'default-home', icon: <DefaultHomeIcon />, label: 'Home' },  { id: 'default-explore', icon: <DefaultCompassIcon />, label: 'Explore' },  { id: 'default-notifications', icon: <DefaultBellIcon />, label: 'Notifications' },];export type LimelightNavProps = {  items?: NavItem[];  defaultActiveIndex?: number;  onTabChange?: (index: number) => void;  className?: string;  limelightClassName?: string;  iconContainerClassName?: string;  iconClassName?: string;};/** * An adaptive-width navigation bar with a "limelight" effect that highlights the active item. */export const LimelightNav = ({  items = defaultNavItems,  defaultActiveIndex = 0,  onTabChange,  className,  limelightClassName,  iconContainerClassName,  iconClassName,}: LimelightNavProps) => {  const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);  const [isReady, setIsReady] = useState(false);  const navItemRefs = useRef<(HTMLAnchorElement | null)[]>([]);  const limelightRef = useRef<HTMLDivElement | null>(null);  useLayoutEffect(() => {    if (items.length === 0) return;    const limelight = limelightRef.current;    const activeItem = navItemRefs.current[activeIndex];        if (limelight && activeItem) {      const newLeft = activeItem.offsetLeft + activeItem.offsetWidth / 2 - limelight.offsetWidth / 2;      limelight.style.left = `${newLeft}px`;      if (!isReady) {        setTimeout(() => setIsReady(true), 50);      }    }  }, [activeIndex, isReady, items]);  if (items.length === 0) {    return null;   }  const handleItemClick = (index: number, itemOnClick?: () => void) => {    setActiveIndex(index);    onTabChange?.(index);    itemOnClick?.();  };  return (    <nav className={cn('relative inline-flex items-center h-16 rounded-lg bg-card text-foreground border px-2', className)}>      {items.map(({ id, icon, label, onClick }, index) => (          <a            key={id}            ref={el => { navItemRefs.current[index] = el; }}            className={cn('relative z-20 flex h-full cursor-pointer items-center justify-center p-5', iconContainerClassName)}            onClick={() => handleItemClick(index, onClick)}            aria-label={label}          >            {cloneElement(icon as React.ReactElement<any>, {              className: cn(                'w-6 h-6 transition-opacity duration-100 ease-in-out',                activeIndex === index ? 'opacity-100' : 'opacity-40',                (icon.props as any)?.className || '',                iconClassName || ''              ),            })}          </a>      ))}      <div         ref={limelightRef}        className={cn(          'absolute top-0 z-10 w-11 h-[5px] rounded-full bg-primary shadow-[0_50px_15px_var(--primary)]',          isReady ? 'transition-[left] duration-400 ease-in-out' : '',          limelightClassName        )}        style={{ left: '-999px' }}      >        <div className="absolute left-[-30%] top-[5px] w-[160%] h-14 [clip-path:polygon(5%_100%,25%_0,75%_0,95%_100%)] bg-gradient-to-b from-primary/30 to-transparent pointer-events-none" />      </div>    </nav>  );};

Props

Prop	Type	Default	Description
`items`	`NavItem[]`	`defaultNavItems`	Array of navigation items
`defaultActiveIndex`	`number`	`0`	Index of the initially active item
`onTabChange`	`(index: number) => void`	-	Callback when active tab changes
`className`	`string`	-	Additional CSS classes for the nav container
`limelightClassName`	`string`	-	Additional CSS classes for the limelight highlight
`iconContainerClassName`	`string`	-	Additional CSS classes for icon containers
`iconClassName`	`string`	-	Additional CSS classes for icons

Use Cases

This free open source React component is perfect for:

Next.js applications - Create modern navigation with TypeScript safety and sophisticated highlighting effects
Dashboard interfaces - Build intuitive navigation bars with dynamic visual feedback using shadcn/ui patterns
Mobile-first websites - Implement adaptive navigation that responds beautifully across all screen sizes
SaaS platforms - Design professional navigation systems with smooth animations and JavaScript interactions
Portfolio sites - Showcase creative navigation with unique limelight effects using Tailwind CSS styling
Admin panels - Create memorable user interfaces with clear visual hierarchy and open source flexibility
E-commerce sites - Guide users through product categories with elegant animated navigation

Technical Details

Limelight Animation System

The component uses precise positioning calculations for smooth highlighting:

Dynamic positioning: Real-time calculation of active item position using DOM measurements
Smooth transitions: CSS transforms with optimized easing for 60fps animations
Adaptive centering: Automatic highlight positioning that centers on active navigation items

Performance Optimizations

Efficient DOM updates with React refs and minimal state changes for optimal rendering
TypeScript-optimized component structure with proper prop validation and type safety
Tailwind CSS classes for consistent theming without runtime style computation
Smart re-rendering with useLayoutEffect for precise timing and visual stability

Accessibility

This open source component includes comprehensive accessibility features:

ARIA label implementation with proper navigation semantics for assistive technologies
Keyboard navigation support with tab order management and focus indication
React-compatible interaction when used in interactive Next.js applications
High contrast compatibility with automatic theme adaptation using Tailwind CSS
Screen reader friendly with descriptive labels and semantic navigation structure

NavItem Interface

Property	Type	Description
`id`	`string \| number`	Unique identifier for the navigation item
`icon`	`React.ReactElement`	Icon component to display
`label`	`string`	Optional label for accessibility
`onClick`	`() => void`	Optional click handler for the item

LimelightNav

Installation

Features

Usage

Examples

Custom Navigation

Props

LimelightNav

Use Cases

Technical Details

Limelight Animation System

Performance Optimizations

Accessibility

NavItem Interface

On this page

LimelightNav

Reactlimelight-nav

Reactlimelight-nav

On this page