Menu Dock

Versatile dock navigation with responsive variants, dual orientations, and smooth animations. A free open source React component for Next.js with TypeScript support and shadcn/ui design token integration.

Loading component...

'use client';import React, { useState, useRef, useEffect, useMemo } from 'react';import { Home, Briefcase, Calendar, Shield, Settings } from 'lucide-react';import { cn } from '@/lib/utils';type IconComponentType = React.ElementType<{ className?: string }>;export interface MenuDockItem {  label: string;  icon: IconComponentType;  onClick?: () => void;}export interface MenuDockProps {  items?: MenuDockItem[];  className?: string;  variant?: 'default' | 'compact' | 'large';  orientation?: 'horizontal' | 'vertical';  showLabels?: boolean;  animated?: boolean;}const defaultItems: MenuDockItem[] = [    { label: 'home', icon: Home },    { label: 'work', icon: Briefcase },    { label: 'calendar', icon: Calendar },    { label: 'security', icon: Shield },    { label: 'settings', icon: Settings },];export const MenuDock: React.FC<MenuDockProps> = ({   items,   className,  variant = 'default',  orientation = 'horizontal',  showLabels = true,  animated = true}) => {  const finalItems = useMemo(() => {     const isValid = items && Array.isArray(items) && items.length >= 2 && items.length <= 8;     if (!isValid) {        console.warn("MenuDock: 'items' prop is invalid or missing. Using default items.", items);        return defaultItems;     }     return items;  }, [items]);  const [activeIndex, setActiveIndex] = useState(0);  const [underlineWidth, setUnderlineWidth] = useState(0);  const [underlineLeft, setUnderlineLeft] = useState(0);    const textRefs = useRef<(HTMLSpanElement | null)[]>([]);  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);  useEffect(() => {      if (activeIndex >= finalItems.length) {          setActiveIndex(0);      }  }, [finalItems, activeIndex]);  useEffect(() => {    const updateUnderline = () => {      const activeButton = itemRefs.current[activeIndex];      const activeText = textRefs.current[activeIndex];            if (activeButton && activeText && showLabels && orientation === 'horizontal') {        const buttonRect = activeButton.getBoundingClientRect();        const textRect = activeText.getBoundingClientRect();        const containerRect = activeButton.parentElement?.getBoundingClientRect();                if (containerRect) {          setUnderlineWidth(textRect.width);          setUnderlineLeft(buttonRect.left - containerRect.left + (buttonRect.width - textRect.width) / 2);        }      }    };    updateUnderline();    window.addEventListener('resize', updateUnderline);    return () => window.removeEventListener('resize', updateUnderline);  }, [activeIndex, finalItems, showLabels, orientation]);  const handleItemClick = (index: number, item: MenuDockItem) => {    setActiveIndex(index);    item.onClick?.();  };  const getVariantStyles = () => {    switch (variant) {      case 'compact':        return {          container: 'p-1',          item: 'p-2 min-w-12',          icon: 'h-4 w-4',          text: 'text-xs'        };      case 'large':        return {          container: 'p-3',          item: 'p-3 min-w-16',          icon: 'h-6 w-6',          text: 'text-base'        };      default:        return {          container: 'p-2',          item: 'p-2 min-w-14',          icon: 'h-5 w-5',          text: 'text-sm'        };    }  };  const styles = getVariantStyles();  return (    <nav      className={cn(        'relative inline-flex items-center rounded-xl bg-card border shadow-sm',        orientation === 'horizontal' ? 'flex-row' : 'flex-col',        styles.container,        className      )}      role="navigation"    >      {finalItems.map((item, index) => {        const isActive = index === activeIndex;        const IconComponent = item.icon;        return (          <button            key={`${item.label}-${index}`}            ref={(el) => { itemRefs.current[index] = el; }}            className={cn(              'relative flex flex-col items-center justify-center rounded-lg transition-all duration-200',              'hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',              styles.item,              isActive && 'text-primary',              !isActive && 'text-muted-foreground hover:text-foreground'            )}            onClick={() => handleItemClick(index, item)}            aria-label={item.label}            type="button"          >            <div className={cn(              'flex items-center justify-center transition-all duration-200',              animated && isActive && 'animate-bounce',              orientation === 'horizontal' && showLabels ? 'mb-1' : '',              orientation === 'vertical' && showLabels ? 'mb-1' : ''            )}>              <IconComponent className={cn(styles.icon, 'transition-colors duration-200')} />            </div>                        {showLabels && (              <span                ref={(el) => { textRefs.current[index] = el; }}                className={cn(                  'font-medium transition-colors duration-200 capitalize',                  styles.text,                  'whitespace-nowrap'                )}              >                {item.label}              </span>            )}          </button>        );      })}            {/* Animated underline for horizontal orientation with labels */}      {showLabels && orientation === 'horizontal' && (        <div          className={cn(            'absolute bottom-2 h-0.5 bg-primary rounded-full transition-all duration-300 ease-out',            animated ? 'transition-all duration-300' : ''          )}          style={{            width: `${underlineWidth}px`,            left: `${underlineLeft}px`,          }}        />      )}            {/* Active indicator for vertical orientation or no labels */}      {(!showLabels || orientation === 'vertical') && (        <div          className={cn(            'absolute bg-primary rounded-full transition-all duration-300',            orientation === 'vertical'               ? 'left-1 w-1 h-6'               : 'bottom-0.5 h-0.5 w-6',          )}          style={{            [orientation === 'vertical' ? 'top' : 'left']:               orientation === 'vertical'                 ? `${(activeIndex * (variant === 'large' ? 64 : variant === 'compact' ? 56 : 60)) + (variant === 'large' ? 19 : variant === 'compact' ? 16 : 18)}px`                : `${(activeIndex * (variant === 'large' ? 64 : variant === 'compact' ? 56 : 60)) + (variant === 'large' ? 19 : variant === 'compact' ? 16 : 18)}px`          }}        />      )}    </nav>  );};

Installation

npx shadcn@latest add https://www.shadcn.io/registry/menu-dock.json

npx shadcn@latest add https://www.shadcn.io/registry/menu-dock.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/menu-dock.json

bunx shadcn@latest add https://www.shadcn.io/registry/menu-dock.json

Features

Free open source React component built for Next.js applications with professional dock navigation functionality
Multiple responsive variants including compact, default, and large sizes for optimal screen adaptation
TypeScript-first development with comprehensive type definitions and IntelliSense support
Dual orientation support with horizontal and vertical layouts for flexible interface positioning
Tailwind CSS integration for seamless styling, theming, and responsive design patterns
shadcn/ui design tokens providing consistent theming and component integration
Smart dynamic underlines that automatically adjust to text width in horizontal layouts using JavaScript
Smooth bounce animations for active states with configurable animation controls
Flexible configuration options including label visibility, animation toggles, and orientation switching
Desktop-optimized large variant specifically designed for big screen displays and professional interfaces
Complete accessibility support with keyboard navigation, ARIA labels, and screen reader compatibility
Built-in validation system ensuring proper configuration with automatic fallbacks and development warnings

Usage

import { MenuDock, type MenuDockItem } from '@/components/ui/menu-dock';
import { Home, User, Settings } from 'lucide-react';

// Basic usage with default items
<MenuDock />

// Custom menu items with click handlers
const menuItems: MenuDockItem[] = [
  { label: 'home', icon: Home, onClick: () => console.log('Home') },
  { label: 'profile', icon: User, onClick: () => console.log('Profile') },
  { label: 'settings', icon: Settings, onClick: () => console.log('Settings') },
];

// Responsive menu with different variants
<MenuDock 
  items={menuItems}
  variant="default"
  className="lg:hidden"
/>
<MenuDock 
  items={menuItems}
  variant="large"
  className="hidden lg:flex"
/>

// Vertical compact menu
<MenuDock 
  items={menuItems}
  variant="compact"
  orientation="vertical"
/>

// Icons only (no labels)
<MenuDock 
  items={menuItems}
  showLabels={false}
/>

Examples

Custom Items (Large Variant)

Loading component...

'use client';import React, { useState, useRef, useEffect, useMemo } from 'react';import { Home, Briefcase, Calendar, Shield, Settings } from 'lucide-react';import { cn } from '@/lib/utils';type IconComponentType = React.ElementType<{ className?: string }>;export interface MenuDockItem {  label: string;  icon: IconComponentType;  onClick?: () => void;}export interface MenuDockProps {  items?: MenuDockItem[];  className?: string;  variant?: 'default' | 'compact' | 'large';  orientation?: 'horizontal' | 'vertical';  showLabels?: boolean;  animated?: boolean;}const defaultItems: MenuDockItem[] = [    { label: 'home', icon: Home },    { label: 'work', icon: Briefcase },    { label: 'calendar', icon: Calendar },    { label: 'security', icon: Shield },    { label: 'settings', icon: Settings },];export const MenuDock: React.FC<MenuDockProps> = ({   items,   className,  variant = 'default',  orientation = 'horizontal',  showLabels = true,  animated = true}) => {  const finalItems = useMemo(() => {     const isValid = items && Array.isArray(items) && items.length >= 2 && items.length <= 8;     if (!isValid) {        console.warn("MenuDock: 'items' prop is invalid or missing. Using default items.", items);        return defaultItems;     }     return items;  }, [items]);  const [activeIndex, setActiveIndex] = useState(0);  const [underlineWidth, setUnderlineWidth] = useState(0);  const [underlineLeft, setUnderlineLeft] = useState(0);    const textRefs = useRef<(HTMLSpanElement | null)[]>([]);  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);  useEffect(() => {      if (activeIndex >= finalItems.length) {          setActiveIndex(0);      }  }, [finalItems, activeIndex]);  useEffect(() => {    const updateUnderline = () => {      const activeButton = itemRefs.current[activeIndex];      const activeText = textRefs.current[activeIndex];            if (activeButton && activeText && showLabels && orientation === 'horizontal') {        const buttonRect = activeButton.getBoundingClientRect();        const textRect = activeText.getBoundingClientRect();        const containerRect = activeButton.parentElement?.getBoundingClientRect();                if (containerRect) {          setUnderlineWidth(textRect.width);          setUnderlineLeft(buttonRect.left - containerRect.left + (buttonRect.width - textRect.width) / 2);        }      }    };    updateUnderline();    window.addEventListener('resize', updateUnderline);    return () => window.removeEventListener('resize', updateUnderline);  }, [activeIndex, finalItems, showLabels, orientation]);  const handleItemClick = (index: number, item: MenuDockItem) => {    setActiveIndex(index);    item.onClick?.();  };  const getVariantStyles = () => {    switch (variant) {      case 'compact':        return {          container: 'p-1',          item: 'p-2 min-w-12',          icon: 'h-4 w-4',          text: 'text-xs'        };      case 'large':        return {          container: 'p-3',          item: 'p-3 min-w-16',          icon: 'h-6 w-6',          text: 'text-base'        };      default:        return {          container: 'p-2',          item: 'p-2 min-w-14',          icon: 'h-5 w-5',          text: 'text-sm'        };    }  };  const styles = getVariantStyles();  return (    <nav      className={cn(        'relative inline-flex items-center rounded-xl bg-card border shadow-sm',        orientation === 'horizontal' ? 'flex-row' : 'flex-col',        styles.container,        className      )}      role="navigation"    >      {finalItems.map((item, index) => {        const isActive = index === activeIndex;        const IconComponent = item.icon;        return (          <button            key={`${item.label}-${index}`}            ref={(el) => { itemRefs.current[index] = el; }}            className={cn(              'relative flex flex-col items-center justify-center rounded-lg transition-all duration-200',              'hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',              styles.item,              isActive && 'text-primary',              !isActive && 'text-muted-foreground hover:text-foreground'            )}            onClick={() => handleItemClick(index, item)}            aria-label={item.label}            type="button"          >            <div className={cn(              'flex items-center justify-center transition-all duration-200',              animated && isActive && 'animate-bounce',              orientation === 'horizontal' && showLabels ? 'mb-1' : '',              orientation === 'vertical' && showLabels ? 'mb-1' : ''            )}>              <IconComponent className={cn(styles.icon, 'transition-colors duration-200')} />            </div>                        {showLabels && (              <span                ref={(el) => { textRefs.current[index] = el; }}                className={cn(                  'font-medium transition-colors duration-200 capitalize',                  styles.text,                  'whitespace-nowrap'                )}              >                {item.label}              </span>            )}          </button>        );      })}            {/* Animated underline for horizontal orientation with labels */}      {showLabels && orientation === 'horizontal' && (        <div          className={cn(            'absolute bottom-2 h-0.5 bg-primary rounded-full transition-all duration-300 ease-out',            animated ? 'transition-all duration-300' : ''          )}          style={{            width: `${underlineWidth}px`,            left: `${underlineLeft}px`,          }}        />      )}            {/* Active indicator for vertical orientation or no labels */}      {(!showLabels || orientation === 'vertical') && (        <div          className={cn(            'absolute bg-primary rounded-full transition-all duration-300',            orientation === 'vertical'               ? 'left-1 w-1 h-6'               : 'bottom-0.5 h-0.5 w-6',          )}          style={{            [orientation === 'vertical' ? 'top' : 'left']:               orientation === 'vertical'                 ? `${(activeIndex * (variant === 'large' ? 64 : variant === 'compact' ? 56 : 60)) + (variant === 'large' ? 19 : variant === 'compact' ? 16 : 18)}px`                : `${(activeIndex * (variant === 'large' ? 64 : variant === 'compact' ? 56 : 60)) + (variant === 'large' ? 19 : variant === 'compact' ? 16 : 18)}px`          }}        />      )}    </nav>  );};

Loading component...

'use client';import React, { useState, useRef, useEffect, useMemo } from 'react';import { Home, Briefcase, Calendar, Shield, Settings } from 'lucide-react';import { cn } from '@/lib/utils';type IconComponentType = React.ElementType<{ className?: string }>;export interface MenuDockItem {  label: string;  icon: IconComponentType;  onClick?: () => void;}export interface MenuDockProps {  items?: MenuDockItem[];  className?: string;  variant?: 'default' | 'compact' | 'large';  orientation?: 'horizontal' | 'vertical';  showLabels?: boolean;  animated?: boolean;}const defaultItems: MenuDockItem[] = [    { label: 'home', icon: Home },    { label: 'work', icon: Briefcase },    { label: 'calendar', icon: Calendar },    { label: 'security', icon: Shield },    { label: 'settings', icon: Settings },];export const MenuDock: React.FC<MenuDockProps> = ({   items,   className,  variant = 'default',  orientation = 'horizontal',  showLabels = true,  animated = true}) => {  const finalItems = useMemo(() => {     const isValid = items && Array.isArray(items) && items.length >= 2 && items.length <= 8;     if (!isValid) {        console.warn("MenuDock: 'items' prop is invalid or missing. Using default items.", items);        return defaultItems;     }     return items;  }, [items]);  const [activeIndex, setActiveIndex] = useState(0);  const [underlineWidth, setUnderlineWidth] = useState(0);  const [underlineLeft, setUnderlineLeft] = useState(0);    const textRefs = useRef<(HTMLSpanElement | null)[]>([]);  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);  useEffect(() => {      if (activeIndex >= finalItems.length) {          setActiveIndex(0);      }  }, [finalItems, activeIndex]);  useEffect(() => {    const updateUnderline = () => {      const activeButton = itemRefs.current[activeIndex];      const activeText = textRefs.current[activeIndex];            if (activeButton && activeText && showLabels && orientation === 'horizontal') {        const buttonRect = activeButton.getBoundingClientRect();        const textRect = activeText.getBoundingClientRect();        const containerRect = activeButton.parentElement?.getBoundingClientRect();                if (containerRect) {          setUnderlineWidth(textRect.width);          setUnderlineLeft(buttonRect.left - containerRect.left + (buttonRect.width - textRect.width) / 2);        }      }    };    updateUnderline();    window.addEventListener('resize', updateUnderline);    return () => window.removeEventListener('resize', updateUnderline);  }, [activeIndex, finalItems, showLabels, orientation]);  const handleItemClick = (index: number, item: MenuDockItem) => {    setActiveIndex(index);    item.onClick?.();  };  const getVariantStyles = () => {    switch (variant) {      case 'compact':        return {          container: 'p-1',          item: 'p-2 min-w-12',          icon: 'h-4 w-4',          text: 'text-xs'        };      case 'large':        return {          container: 'p-3',          item: 'p-3 min-w-16',          icon: 'h-6 w-6',          text: 'text-base'        };      default:        return {          container: 'p-2',          item: 'p-2 min-w-14',          icon: 'h-5 w-5',          text: 'text-sm'        };    }  };  const styles = getVariantStyles();  return (    <nav      className={cn(        'relative inline-flex items-center rounded-xl bg-card border shadow-sm',        orientation === 'horizontal' ? 'flex-row' : 'flex-col',        styles.container,        className      )}      role="navigation"    >      {finalItems.map((item, index) => {        const isActive = index === activeIndex;        const IconComponent = item.icon;        return (          <button            key={`${item.label}-${index}`}            ref={(el) => { itemRefs.current[index] = el; }}            className={cn(              'relative flex flex-col items-center justify-center rounded-lg transition-all duration-200',              'hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',              styles.item,              isActive && 'text-primary',              !isActive && 'text-muted-foreground hover:text-foreground'            )}            onClick={() => handleItemClick(index, item)}            aria-label={item.label}            type="button"          >            <div className={cn(              'flex items-center justify-center transition-all duration-200',              animated && isActive && 'animate-bounce',              orientation === 'horizontal' && showLabels ? 'mb-1' : '',              orientation === 'vertical' && showLabels ? 'mb-1' : ''            )}>              <IconComponent className={cn(styles.icon, 'transition-colors duration-200')} />            </div>                        {showLabels && (              <span                ref={(el) => { textRefs.current[index] = el; }}                className={cn(                  'font-medium transition-colors duration-200 capitalize',                  styles.text,                  'whitespace-nowrap'                )}              >                {item.label}              </span>            )}          </button>        );      })}            {/* Animated underline for horizontal orientation with labels */}      {showLabels && orientation === 'horizontal' && (        <div          className={cn(            'absolute bottom-2 h-0.5 bg-primary rounded-full transition-all duration-300 ease-out',            animated ? 'transition-all duration-300' : ''          )}          style={{            width: `${underlineWidth}px`,            left: `${underlineLeft}px`,          }}        />      )}            {/* Active indicator for vertical orientation or no labels */}      {(!showLabels || orientation === 'vertical') && (        <div          className={cn(            'absolute bg-primary rounded-full transition-all duration-300',            orientation === 'vertical'               ? 'left-1 w-1 h-6'               : 'bottom-0.5 h-0.5 w-6',          )}          style={{            [orientation === 'vertical' ? 'top' : 'left']:               orientation === 'vertical'                 ? `${(activeIndex * (variant === 'large' ? 64 : variant === 'compact' ? 56 : 60)) + (variant === 'large' ? 19 : variant === 'compact' ? 16 : 18)}px`                : `${(activeIndex * (variant === 'large' ? 64 : variant === 'compact' ? 56 : 60)) + (variant === 'large' ? 19 : variant === 'compact' ? 16 : 18)}px`          }}        />      )}    </nav>  );};

Vertical Layout

Loading component...

'use client';import React, { useState, useRef, useEffect, useMemo } from 'react';import { Home, Briefcase, Calendar, Shield, Settings } from 'lucide-react';import { cn } from '@/lib/utils';type IconComponentType = React.ElementType<{ className?: string }>;export interface MenuDockItem {  label: string;  icon: IconComponentType;  onClick?: () => void;}export interface MenuDockProps {  items?: MenuDockItem[];  className?: string;  variant?: 'default' | 'compact' | 'large';  orientation?: 'horizontal' | 'vertical';  showLabels?: boolean;  animated?: boolean;}const defaultItems: MenuDockItem[] = [    { label: 'home', icon: Home },    { label: 'work', icon: Briefcase },    { label: 'calendar', icon: Calendar },    { label: 'security', icon: Shield },    { label: 'settings', icon: Settings },];export const MenuDock: React.FC<MenuDockProps> = ({   items,   className,  variant = 'default',  orientation = 'horizontal',  showLabels = true,  animated = true}) => {  const finalItems = useMemo(() => {     const isValid = items && Array.isArray(items) && items.length >= 2 && items.length <= 8;     if (!isValid) {        console.warn("MenuDock: 'items' prop is invalid or missing. Using default items.", items);        return defaultItems;     }     return items;  }, [items]);  const [activeIndex, setActiveIndex] = useState(0);  const [underlineWidth, setUnderlineWidth] = useState(0);  const [underlineLeft, setUnderlineLeft] = useState(0);    const textRefs = useRef<(HTMLSpanElement | null)[]>([]);  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);  useEffect(() => {      if (activeIndex >= finalItems.length) {          setActiveIndex(0);      }  }, [finalItems, activeIndex]);  useEffect(() => {    const updateUnderline = () => {      const activeButton = itemRefs.current[activeIndex];      const activeText = textRefs.current[activeIndex];            if (activeButton && activeText && showLabels && orientation === 'horizontal') {        const buttonRect = activeButton.getBoundingClientRect();        const textRect = activeText.getBoundingClientRect();        const containerRect = activeButton.parentElement?.getBoundingClientRect();                if (containerRect) {          setUnderlineWidth(textRect.width);          setUnderlineLeft(buttonRect.left - containerRect.left + (buttonRect.width - textRect.width) / 2);        }      }    };    updateUnderline();    window.addEventListener('resize', updateUnderline);    return () => window.removeEventListener('resize', updateUnderline);  }, [activeIndex, finalItems, showLabels, orientation]);  const handleItemClick = (index: number, item: MenuDockItem) => {    setActiveIndex(index);    item.onClick?.();  };  const getVariantStyles = () => {    switch (variant) {      case 'compact':        return {          container: 'p-1',          item: 'p-2 min-w-12',          icon: 'h-4 w-4',          text: 'text-xs'        };      case 'large':        return {          container: 'p-3',          item: 'p-3 min-w-16',          icon: 'h-6 w-6',          text: 'text-base'        };      default:        return {          container: 'p-2',          item: 'p-2 min-w-14',          icon: 'h-5 w-5',          text: 'text-sm'        };    }  };  const styles = getVariantStyles();  return (    <nav      className={cn(        'relative inline-flex items-center rounded-xl bg-card border shadow-sm',        orientation === 'horizontal' ? 'flex-row' : 'flex-col',        styles.container,        className      )}      role="navigation"    >      {finalItems.map((item, index) => {        const isActive = index === activeIndex;        const IconComponent = item.icon;        return (          <button            key={`${item.label}-${index}`}            ref={(el) => { itemRefs.current[index] = el; }}            className={cn(              'relative flex flex-col items-center justify-center rounded-lg transition-all duration-200',              'hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',              styles.item,              isActive && 'text-primary',              !isActive && 'text-muted-foreground hover:text-foreground'            )}            onClick={() => handleItemClick(index, item)}            aria-label={item.label}            type="button"          >            <div className={cn(              'flex items-center justify-center transition-all duration-200',              animated && isActive && 'animate-bounce',              orientation === 'horizontal' && showLabels ? 'mb-1' : '',              orientation === 'vertical' && showLabels ? 'mb-1' : ''            )}>              <IconComponent className={cn(styles.icon, 'transition-colors duration-200')} />            </div>                        {showLabels && (              <span                ref={(el) => { textRefs.current[index] = el; }}                className={cn(                  'font-medium transition-colors duration-200 capitalize',                  styles.text,                  'whitespace-nowrap'                )}              >                {item.label}              </span>            )}          </button>        );      })}            {/* Animated underline for horizontal orientation with labels */}      {showLabels && orientation === 'horizontal' && (        <div          className={cn(            'absolute bottom-2 h-0.5 bg-primary rounded-full transition-all duration-300 ease-out',            animated ? 'transition-all duration-300' : ''          )}          style={{            width: `${underlineWidth}px`,            left: `${underlineLeft}px`,          }}        />      )}            {/* Active indicator for vertical orientation or no labels */}      {(!showLabels || orientation === 'vertical') && (        <div          className={cn(            'absolute bg-primary rounded-full transition-all duration-300',            orientation === 'vertical'               ? 'left-1 w-1 h-6'               : 'bottom-0.5 h-0.5 w-6',          )}          style={{            [orientation === 'vertical' ? 'top' : 'left']:               orientation === 'vertical'                 ? `${(activeIndex * (variant === 'large' ? 64 : variant === 'compact' ? 56 : 60)) + (variant === 'large' ? 19 : variant === 'compact' ? 16 : 18)}px`                : `${(activeIndex * (variant === 'large' ? 64 : variant === 'compact' ? 56 : 60)) + (variant === 'large' ? 19 : variant === 'compact' ? 16 : 18)}px`          }}        />      )}    </nav>  );};

Icons Only

Loading component...

'use client';import React, { useState, useRef, useEffect, useMemo } from 'react';import { Home, Briefcase, Calendar, Shield, Settings } from 'lucide-react';import { cn } from '@/lib/utils';type IconComponentType = React.ElementType<{ className?: string }>;export interface MenuDockItem {  label: string;  icon: IconComponentType;  onClick?: () => void;}export interface MenuDockProps {  items?: MenuDockItem[];  className?: string;  variant?: 'default' | 'compact' | 'large';  orientation?: 'horizontal' | 'vertical';  showLabels?: boolean;  animated?: boolean;}const defaultItems: MenuDockItem[] = [    { label: 'home', icon: Home },    { label: 'work', icon: Briefcase },    { label: 'calendar', icon: Calendar },    { label: 'security', icon: Shield },    { label: 'settings', icon: Settings },];export const MenuDock: React.FC<MenuDockProps> = ({   items,   className,  variant = 'default',  orientation = 'horizontal',  showLabels = true,  animated = true}) => {  const finalItems = useMemo(() => {     const isValid = items && Array.isArray(items) && items.length >= 2 && items.length <= 8;     if (!isValid) {        console.warn("MenuDock: 'items' prop is invalid or missing. Using default items.", items);        return defaultItems;     }     return items;  }, [items]);  const [activeIndex, setActiveIndex] = useState(0);  const [underlineWidth, setUnderlineWidth] = useState(0);  const [underlineLeft, setUnderlineLeft] = useState(0);    const textRefs = useRef<(HTMLSpanElement | null)[]>([]);  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);  useEffect(() => {      if (activeIndex >= finalItems.length) {          setActiveIndex(0);      }  }, [finalItems, activeIndex]);  useEffect(() => {    const updateUnderline = () => {      const activeButton = itemRefs.current[activeIndex];      const activeText = textRefs.current[activeIndex];            if (activeButton && activeText && showLabels && orientation === 'horizontal') {        const buttonRect = activeButton.getBoundingClientRect();        const textRect = activeText.getBoundingClientRect();        const containerRect = activeButton.parentElement?.getBoundingClientRect();                if (containerRect) {          setUnderlineWidth(textRect.width);          setUnderlineLeft(buttonRect.left - containerRect.left + (buttonRect.width - textRect.width) / 2);        }      }    };    updateUnderline();    window.addEventListener('resize', updateUnderline);    return () => window.removeEventListener('resize', updateUnderline);  }, [activeIndex, finalItems, showLabels, orientation]);  const handleItemClick = (index: number, item: MenuDockItem) => {    setActiveIndex(index);    item.onClick?.();  };  const getVariantStyles = () => {    switch (variant) {      case 'compact':        return {          container: 'p-1',          item: 'p-2 min-w-12',          icon: 'h-4 w-4',          text: 'text-xs'        };      case 'large':        return {          container: 'p-3',          item: 'p-3 min-w-16',          icon: 'h-6 w-6',          text: 'text-base'        };      default:        return {          container: 'p-2',          item: 'p-2 min-w-14',          icon: 'h-5 w-5',          text: 'text-sm'        };    }  };  const styles = getVariantStyles();  return (    <nav      className={cn(        'relative inline-flex items-center rounded-xl bg-card border shadow-sm',        orientation === 'horizontal' ? 'flex-row' : 'flex-col',        styles.container,        className      )}      role="navigation"    >      {finalItems.map((item, index) => {        const isActive = index === activeIndex;        const IconComponent = item.icon;        return (          <button            key={`${item.label}-${index}`}            ref={(el) => { itemRefs.current[index] = el; }}            className={cn(              'relative flex flex-col items-center justify-center rounded-lg transition-all duration-200',              'hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',              styles.item,              isActive && 'text-primary',              !isActive && 'text-muted-foreground hover:text-foreground'            )}            onClick={() => handleItemClick(index, item)}            aria-label={item.label}            type="button"          >            <div className={cn(              'flex items-center justify-center transition-all duration-200',              animated && isActive && 'animate-bounce',              orientation === 'horizontal' && showLabels ? 'mb-1' : '',              orientation === 'vertical' && showLabels ? 'mb-1' : ''            )}>              <IconComponent className={cn(styles.icon, 'transition-colors duration-200')} />            </div>                        {showLabels && (              <span                ref={(el) => { textRefs.current[index] = el; }}                className={cn(                  'font-medium transition-colors duration-200 capitalize',                  styles.text,                  'whitespace-nowrap'                )}              >                {item.label}              </span>            )}          </button>        );      })}            {/* Animated underline for horizontal orientation with labels */}      {showLabels && orientation === 'horizontal' && (        <div          className={cn(            'absolute bottom-2 h-0.5 bg-primary rounded-full transition-all duration-300 ease-out',            animated ? 'transition-all duration-300' : ''          )}          style={{            width: `${underlineWidth}px`,            left: `${underlineLeft}px`,          }}        />      )}            {/* Active indicator for vertical orientation or no labels */}      {(!showLabels || orientation === 'vertical') && (        <div          className={cn(            'absolute bg-primary rounded-full transition-all duration-300',            orientation === 'vertical'               ? 'left-1 w-1 h-6'               : 'bottom-0.5 h-0.5 w-6',          )}          style={{            [orientation === 'vertical' ? 'top' : 'left']:               orientation === 'vertical'                 ? `${(activeIndex * (variant === 'large' ? 64 : variant === 'compact' ? 56 : 60)) + (variant === 'large' ? 19 : variant === 'compact' ? 16 : 18)}px`                : `${(activeIndex * (variant === 'large' ? 64 : variant === 'compact' ? 56 : 60)) + (variant === 'large' ? 19 : variant === 'compact' ? 16 : 18)}px`          }}        />      )}    </nav>  );};

Props

MenuDock

Prop	Type	Default	Description
`items`	`InteractiveMenuItem[]`	`defaultItems`	Array of menu items (2-8 items)
`className`	`string`	-	Additional CSS classes
`variant`	`'default' \| 'compact' \| 'large'`	`'default'`	Size variant of the menu
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout orientation
`showLabels`	`boolean`	`true`	Whether to show text labels
`animated`	`boolean`	`true`	Enable/disable animations

MenuDockItem Interface

Property	Type	Description
`label`	`string`	Display text for the menu item
`icon`	`React.ElementType<{ className?: string }>`	Icon component (e.g., Lucide icons)
`onClick`	`() => void`	Optional click handler

Variants

Size Variants

Compact: p-1, smaller icons (16px), minimal spacing - ideal for sidebars
Default: p-4, medium icons (20px), balanced spacing - general use
Large: p-6, larger icons (28px), generous spacing - big screens and desktop

Orientation Options

Horizontal: Traditional navbar-style layout with optional underlines
Vertical: Sidebar-style layout with position indicators

Responsive Design

// Responsive pattern for different screen sizes
<MenuDock variant="compact" className="md:hidden" />
<MenuDock variant="default" className="hidden md:flex lg:hidden" />
<MenuDock variant="large" className="hidden lg:flex" />

Animation Details

Icon Bounce: Smooth bounce animation for active states using CSS keyframes
Dynamic Underlines: Smart positioning that adjusts to text width (horizontal mode)
Position Indicators: Animated indicators for vertical layouts and icon-only modes
Smooth Transitions: 200-300ms duration for all state changes
Responsive Animations: Automatically adapt to screen size and orientation changes

Styling

The component uses shadcn/ui design tokens:

bg-card - Background color
border - Border styling
text-primary - Active text color
text-muted-foreground - Inactive text color
hover:bg-muted/50 - Hover states
focus-visible:ring-2 - Focus indicators

Use Cases

This free open source React component is perfect for:

Next.js dashboards - Create responsive navigation with TypeScript safety and multiple size variants
Mobile-first applications - Build adaptive navigation that scales beautifully using shadcn/ui design patterns
Admin interfaces - Implement professional dock navigation with smooth animations and JavaScript interactions
Portfolio websites - Design unique navigation experiences with dual orientations using Tailwind CSS styling
SaaS platforms - Create memorable user interfaces with configurable layouts and open source flexibility
E-commerce sites - Guide users through product categories with elegant animated navigation
Design systems - Integrate versatile dock components into existing component libraries

Technical Details

Responsive Variant System

The component adapts automatically to different screen requirements:

Compact variant: Optimized for mobile and sidebar use with minimal spacing and 16px icons
Default variant: Balanced design for general use with medium spacing and 20px icons
Large variant: Desktop-optimized with generous spacing and 28px icons for professional interfaces

Smart Animation System

Dynamic underline positioning with real-time text width calculation using DOM measurements
Bounce animations for active states with CSS keyframes and configurable timing
Position indicators for vertical layouts with smooth transitions and responsive positioning
Resize-responsive animations that adapt to screen changes and orientation shifts

Performance Optimizations

Efficient DOM measurements with optimized resize handling and minimal recalculations
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 React refs and memoized calculations for optimal performance

Accessibility

This open source component includes comprehensive accessibility features:

Complete keyboard navigation with proper tab order management and focus indicators
ARIA label implementation with semantic navigation structure for assistive technologies
React-compatible interaction when used in interactive Next.js applications
High contrast support with customizable theming using shadcn/ui design tokens
Screen reader friendly with descriptive labels and accessible component architecture

Validation

The component includes built-in validation:

Items array must contain 2-8 items
Invalid configurations fall back to default items
Console warnings for development debugging
Automatic fallback to safe defaults

Installation

Features

Usage

Examples

Custom Items (Large Variant)

Responsive Menu

Vertical Layout

Icons Only

Props

MenuDock

MenuDockItem Interface

Variants

Size Variants

Orientation Options

Responsive Design

Animation Details

Styling

Use Cases

Technical Details

Responsive Variant System

Smart Animation System

Performance Optimizations

Accessibility

Validation

On this page

Menu Dock

Reactmenu-dock

Reactmenu-dock

Reactmenu-dock

Reactmenu-dock

Reactmenu-dock

On this page