Floating Navbar
Barre de navigation flottante qui se masque au defilement vers le bas et reapparait vers le haut. Installez Floating Navbar depuis le registre VLLNT UI avec la CLI shadcn.
Barre de navigation flottante qui se masque au defilement vers le bas et reapparait vers le haut. Fait partie de la famille navigation dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Floating Navbar a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/floating-navbar.jsonSource
"use client";
import * as React from "react";
import { cn } from "../../lib/utils";
/** Props for {@link FloatingNavbar}. */
export type FloatingNavbarProps = React.ComponentPropsWithoutRef<"nav">;
function usePrefersReducedMotion(): boolean {
const [reduced, setReduced] = React.useState(false);
React.useEffect(() => {
if (
typeof window === "undefined" ||
typeof window.matchMedia !== "function"
) {
return;
}
const query = window.matchMedia("(prefers-reduced-motion: reduce)");
const onChange = (): void => {
setReduced(query.matches);
};
onChange();
query.addEventListener("change", onChange);
return () => {
query.removeEventListener("change", onChange);
};
}, []);
return reduced;
}
function useScrollVisibility(reduced: boolean): boolean {
const [visible, setVisible] = React.useState(true);
const lastScrollY = React.useRef(0);
React.useEffect(() => {
if (reduced || typeof window === "undefined") {
return;
}
const onScroll = (): void => {
const current = window.scrollY;
setVisible(current < lastScrollY.current || current < 16);
lastScrollY.current = current;
};
window.addEventListener("scroll", onScroll, { passive: true });
return () => {
window.removeEventListener("scroll", onScroll);
};
}, [reduced]);
return reduced ? true : visible;
}
/**
* Floating navigation bar that hides on scroll down and reveals on scroll up.
*
* Respects `prefers-reduced-motion`: the bar stays visible.
*
* @example
* ```tsx
* <FloatingNavbar>
* <a href="#home">Home</a>
* </FloatingNavbar>
* ```
*/
export const FloatingNavbar = ({
children,
className,
ref,
...props
}: FloatingNavbarProps & { ref?: React.Ref<HTMLElement> }) => {
const reduced = usePrefersReducedMotion();
const visible = useScrollVisibility(reduced);
return (
<nav
className={cn(
"fixed inset-x-0 top-4 z-50 mx-auto flex w-fit items-center gap-4 rounded-full border bg-card/70 px-6 py-2 shadow-lg backdrop-blur transition-transform duration-300",
visible ? "" : "-translate-y-[150%]",
className,
)}
ref={ref}
{...props}
>
{children}
</nav>
);
};
FloatingNavbar.displayName = "FloatingNavbar";
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.