proNew340 lines · framer-motion

Command Bar Navbar

A search box that opens a real command palette, not a search page. A full-width nav bar with a logo, a few links and a search-styled button carrying a visual ⌘K badge; clicking it opens a command-palette overlay with a text input that filters a small static list of mock commands live, positioned entirely inside the section.

Use it for: A SaaS app shell or dashboard landing page that wants a keyboard-flavoured, power-user search entry point without wiring a real global shortcut.
Themes: Light + dark
License: Commercial use

Live

Workspace

Overview

Active sessions

Response time

Open tickets

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width nav bar with a logo, a few links, and a search-styled "command"
 * button that carries a visual ⌘K badge. Clicking it opens a command-palette
 * overlay, positioned absolute inside the section (never portal/fixed), with
 * a real client-side filter over a small static list of mock commands.
 */

export interface NavLink {
  label: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→The ⌘K badge is a purely visual hint; no global window keydown listener is bound, so multiple previews of this block mounted on one page never fight over the shortcut — the palette only opens on click.
→Clicking the search button or its compact mobile icon toggles an AnimatePresence overlay positioned absolute inside the section's relative container (never fixed/portal), with a backdrop blur behind it.
→The input runs a case-insensitive substring match against each command's label + tag combined, narrowing the list on every keystroke; an empty match renders a dedicated "no commands match" state.
→Escape or a pointerdown outside the palette element closes it; the query resets to empty on close.
→A separate hamburger button toggles a collapsible mobile link list (height/opacity animated), independent from the command palette state.
→prefers-reduced-motion disables the drop-in/scale spring on the palette and the mobile menu's height animation, swapping to instant toggles.

Accessibility

✓The palette has `role="dialog"`, `aria-modal="true"` and `aria-label`; the trigger buttons expose `aria-haspopup` and `aria-expanded`.
✓The palette input receives focus automatically when the overlay opens, and Escape returns control to the page.
✓All decorative icons are `aria-hidden`; every link and button has visible text or an `aria-label`.
✓The mobile menu button reflects its open state via `aria-expanded` and swaps its icon between hamburger and close glyphs.
✓Honours prefers-reduced-motion.