Expandable Navbar

A navbar with expandable items that show panels on hover or click. It adjusts height and transitions smoothly. Use when needing a responsive, animated navigation bar with dynamic content.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/expandable-navbar

npx layro-cli add @educlopez/expandable-navbar

npx layro-cli add @educlopez/expandable-navbar

bunx layro-cli add @educlopez/expandable-navbar

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import SmoothButton from "@/components/smoothui/smooth-button";
import { cn } from "@/lib/utils";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
  type FocusEvent,
  type KeyboardEvent,
  type ReactNode,
  useCallback,
  useEffect,
  useId,
  useLayoutEffect,
  useRef,