Components

Search-Expand Navigation Bar

Click the search icon and the bar becomes a field, then the box grows upward into a card of recent searches. Hit ✕ to replay every step in reverse. Click the avatar for an account dropdown. Two open effects: travel (the icon glides right → left) or flip (the home icon rises and blurs into the search icon while the rest blur away).

Effect: travel · Last search: none

Install

npx moumenlab add search-expand-nav

For AI

Open .md

Usage

"use client";

import SearchExpandNav from "./search-expand-nav";

export default function SearchExpandNavExample() {
  return (
    <div className="flex flex-col items-center gap-16 pt-24">
      {/* Default "travel" effect: the search icon glides right → left. */}
      <SearchExpandNav onSearch={(query) => console.log("search", query)} user="Ada Lovelace" handle="@ada" />

      {/* "flip" effect: the first icon rises + blurs into the search icon. */}
      <SearchExpandNav effect="flip" />
    </div>
  );
}

Story

  1. Two fixtures eating the screen

    At work the layout came with two fixtures: a left sidebar locked at 80px that never extends, and a floating searchbar sitting over the content. On big monitors, fine. On smaller screens, together they taxed the one thing that actually needed the room: the content.

  2. Combine, then drop to the bottom

    The move: fold both into one. Navigation icons, the avatar and search became a single bottom bar. The 80px rail returns to the content, the search stops floating over it, and the bar sits where thumbs and eyes already expect it.

  3. The spark

    The layout idea was sparked by a bottom nav I saw on X. The resting shape was right: the quiet bar with search waiting at its edge. What it still needed was motion that could carry a professional product.

  4. A two-stage morph

    Opening plays as two sequenced stages, one driving property each. First the horizontal morph: the search icon glides left to become the field's leading icon while the rest of the chrome fades. Then the vertical grow: anchored to the bottom, the box grows upward into a card of recent searches. The travel distance is measured from layout, so it stays correct when the bar shrinks on narrow screens.

  5. The flip, my addition

    On top of the inspiration I added the flip effect: instead of the search icon travelling the whole bar, the first icon rises and blurs into the search icon in place. Shorter distance, less spectacle: it reads more professional and feels faster. Both effects shipped as a prop, and the flip is the one I reach for.

References