"use client"; import * as React from "react"; import { motion, useMotionValueEvent, useScroll } from "motion/react"; import { cn, useReducedMotion } from "@kineticui/core"; export type NavbarItem = { label: string; href: string; active?: boolean }; export type NavbarProps = { logo?: React.ReactNode; items: NavbarItem[]; /** Buttons on the right, e.g. "Start free". */ actions?: React.ReactNode; /** Hide while scrolling down, show again when scrolling up. */ hideOnScroll?: boolean; /** Custom link renderer, e.g. Next.js . */ renderLink?: (item: NavbarItem, props: { className: string; children: React.ReactNode }) => React.ReactNode; className?: string; }; /** Floating pill navbar that shrinks on scroll and slides away while you scroll down. */ export function Navbar({ logo, items, actions, hideOnScroll = true, renderLink, className }: NavbarProps) { const { scrollY } = useScroll(); const reduced = useReducedMotion(); const [hidden, setHidden] = React.useState(false); const [scrolled, setScrolled] = React.useState(false); const [hover, setHover] = React.useState(null); const id = React.useId(); useMotionValueEvent(scrollY, "change", (y) => { const prev = scrollY.getPrevious() ?? 0; setScrolled(y > 24); if (hideOnScroll) setHidden(y > prev && y > 160); }); return ( ); }

Floating Navbar

Installation

Exports