April 7, 2025/Simple/Navigation

Nav Panel Height Expand

A hidden nav panel animates from height:0 to height:auto when the menu is opened. Simultaneously fades in. Collapses back on close. Source: itsjay.us nav dock menu open.

import NavPanelHeightExpand from "./index.jsx";
import styles from "./demo.module.css";

const props = {
  siteName: "No-5 Studio",
  links: [
    { label: "Work", href: "#" },
    { label: "About", href: "#" },
    { label: "Services", href: "#" },
    { label: "Contact", href: "#" },
  ],
};

export default function NavPanelHeightExpandDemo() {
  return (
    <div className={styles.demo}>
      <NavPanelHeightExpand {...props} />
      <div className={styles.hero}>
        <p className={styles.label}>Portfolio — 2024</p>
        <h1 className={styles.heading}>Selected Work</h1>
        <p className={styles.sub}>Interaction &amp; Visual Design</p>
      </div>
    </div>
  );
}
  • framer-motion

Related Components

1MO AGO
Pill Header Overlaynavigation
3MO AGO
Nav Slide Panelnavigation
3MO AGO
Nav Agency Gridnavigation