Building a Floating Pill Header with Next.js and Tailwind

Zoom

1. Information Density vs. Screen Real Estate: A header needs to provide fast access to main pages, search, and reading lists, but must not crowd the viewport, especially on mobile.
2. Dynamic UI Transitions: Expanding the search bar or opening a dropdown should feel fluid, without sudden layout shifts or jarring jumps.
3. Scroll-based Behavior: The navigation needs to get out of the way when the user is reading (scrolling down), but reappear immediately when they look for it (scrolling up).
4. Visual Contrast: In SnipGeek's structured, sharp layout, the header serves as a distinct, floating element that feels light and fluid.

Core Technologies

• Next.js App Router: For the component structure and server-side rendering.
• React Hooks: Primarily useState, useEffect, and useRef to manage state, side effects, and direct DOM references.
• Tailwind CSS: For all styling, enabling rapid, utility-first design. We also use clsx for conditionally applying classes.
• Lucide React: For the icons.

Step 1: The Basic Structure & Floating Position

<header className="fixed top-4 left-4 right-4 md:left-1/2 md:-translate-x-1/2 ... z-50">
  <nav className="relative ... rounded-full bg-primary/90 backdrop-blur-sm ...">
    {/* Content goes here */}
  </nav>
</header>

• fixed top-4: This pins the header near the top of the viewport.
• left-4 right-4: On mobile, it spans most of the width.
• md:left-1/2 md:-translate-x-1/2: On medium screens and up, it centers itself horizontally.
• bg-primary/90 backdrop-blur-sm: This creates the semi-transparent, blurred glass effect.
• rounded-full: This gives it the "pill" shape.

Step 2: The Brain - View State Management

type ActiveView = 'none' | 'search' | 'menu' | 'readingList';
const [activeView, setActiveView] = useState<ActiveView>('none');

Step 3: Dynamic Search Experience

1. State Transition: Clicking the search icon sets activeView = 'search'.
2. Conditional Animation: CSS classes are toggled using clsx. The main navigation links fade out (opacity-0) while the search input container fades in (opacity-100).
3. Auto-focus: A useEffect hook triggers when the search view becomes active, automatically focusing the <input> element for a seamless user experience.

   const searchInputRef = useRef<HTMLInputElement>(null);
   
   useEffect(() => {
     if (isSearchOpen) {
       // A short timeout ensures the element is visible before focusing
       setTimeout(() => searchInputRef.current?.focus(), 100);
     }
   }, [isSearchOpen]);

4. Real-time Filtering: Another useEffect watches for changes in the search query state. It filters a pre-loaded array of all posts and notes to show relevant results instantly.

Step 4: Smart Visibility on Scroll

const lastScrollY = useRef(0);
const [isVisible, setIsVisible] = useState(true);

useEffect(() => {
  const handleScroll = () => {
    const currentScrollY = window.scrollY;
    // Show if scrolling up or near the top
    if (currentScrollY < lastScrollY.current || currentScrollY < 10) {
      setIsVisible(true);
    } else if (currentScrollY > 100 && currentScrollY > lastScrollY.current) {
      // Hide if scrolling down and past a certain threshold
      setIsVisible(false);
    }
    lastScrollY.current = currentScrollY;
  };

  window.addEventListener('scroll', handleScroll, { passive: true });
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

Step 5: The Little Details

• Escape Key: A global event listener is set up to close any active view (search, menu, etc.) when the 'Escape' key is pressed.
• Click Outside: A similar listener closes the views if the user clicks anywhere outside the header component.
• Responsiveness: The component gracefully transitions from a full-width mobile header to a compact, centered desktop header using Tailwind's responsive prefixes (md:).

Precision Tech Update (February 27, 2026)

• Tailwind CSS — Responsive Design — Official docs covering the md: prefix and breakpoint system used throughout the header.
• React Docs — useRef — Reference for useRef, covering both DOM refs (scroll tracking, input focus) and mutable instance variables.
• MDN — EventTarget.addEventListener() passive option — Explains the { passive: true } option and its impact on scroll performance.
• clsx on npm — Lightweight utility for constructing conditional className strings, used extensively in the header's animation logic.