April 7, 2025SimpleNavigation
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.
Preview
Source
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 & Visual Design</p>
</div>
</div>
);
}
Dependencies
framer-motion