Floating Navbar

Layout

Pill nav fixed at top-10 that hides on scroll-down and reappears on scroll-up — adapted from Aceternity UI.

Floating Navbar — some ao rolar pra baixo, volta ao rolar pra cima

Componentes Blocos Changelog

Role esta área pra ver a nav aparecer e sumir.

Instalação via CLI

$ npx kikitocn add floating-navbar

Interno:

@/lib/utilsmotion

Exemplo de uso

Floating NavbarExample.tsx

import { FloatingNavbar } from "@/components/ui/cn/floating-navbar/FloatingNavbar";

export function FloatingNavbarExample() {
  return (
    <FloatingNavbar />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`navItems*`	`FloatingNavItem[]`	—	{ name, link, icon? }[]
`ctaLabel`	`string`	`'Entrar'`	Rótulo do botão CTA
`onCtaClick`	`() => void`	—	Callback do CTA
`className`	`string`	—	Classes CSS extras

Voltar para Layout

Carregando…