Neobrutalism Dock

A fixed navigation dock at the bottom of the screen featuring neobrutalism styling, hover effects, tooltips, and responsive design for mobile and desktop.

Usage

import NeoBrutalismDock from '@/components/NeoBrutalismDock';

export default function MyLayout() {
  return (
    <div className="relative min-h-screen">
      {/* Your page content */}
      <main className="pb-20">
        <h1>My Page</h1>
        <p>Content goes here...</p>
      </main>
      
      {/* Add the dock to your layout */}
      <NeoBrutalismDock />
    </div>
  );
}

Examples

Standard Dock

The default NeoBrutalismDock component that provides navigation links with hover tooltips and a theme toggle.

// Add the dock to your layout
<NeoBrutalismDock />

Custom Implementation

To customize the dock, you would need to modify the component source code. Here's how you might create a similar dock with custom items:

// Custom dock implementation example
<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50 pointer-events-none">
  <div className="pointer-events-auto overflow-hidden">
    <div className="flex items-center bg-white dark:bg-black border-3 border-black dark:border-white rounded-lg px-1.5 py-1 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)]">
      {/* Home icon */}
      <Link href="/" className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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"></path>
          <polyline points="9 22 9 12 15 12 15 22"></polyline>
        </svg>
      </Link>
      
      <div className="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-1"></div>
      
      {/* Add more custom items here */}
      
    </div>
    
    {/* Shadow accent */}
    <div className="absolute inset-0 bg-black dark:bg-white rounded-lg translate-x-[4px] translate-y-[4px] -z-10"></div>
  </div>
</div>

DockItem Component Information

The NeoBrutalismDock uses an internal DockItem component to render each icon in the dock. Here's information about the DockItem component's props:

Name	Type	Default	Description
icon	React.ReactNode	undefined	The icon to display in the dock item.
href	string	undefined	Optional URL to navigate to when the item is clicked.
onClick	() => void	undefined	Optional click handler for the item.
label	string	undefined	Label text to display when hovering over the item.
isActive	boolean	false	Whether the item is in active state.
showOnMobile	boolean	true	Whether to display the item on mobile devices.

If you need to customize the items in the dock, you would need to modify the component code directly.

// DockItem interface
interface DockItemProps {
  icon: React.ReactNode;       // The icon to display
  href?: string;               // Optional URL to navigate to
  onClick?: () => void;        // Optional click handler
  label?: string;              // Label text on hover
  isActive?: boolean;          // Whether the item is active
  showOnMobile?: boolean;      // Whether to show on mobile
}

// Example usage inside NeoBrutalismDock component
<DockItem 
  icon={<HomeIcon />} 
  href="/" 
  label="Home"
  showOnMobile={true}
/>