Carregando…Carregando…Carregando…Carregando…Navbar that shrinks on scroll past 100px — backdrop blur, glass shadow, drops 20px and narrows (40% desktop / 90% mobile) with spring. Composable subcomponents. Adapted from Aceternity UI.
$ npx kikitocn add resizable-navbar@/lib/utilsmotionimport { ResizableNavbar } from "@/components/ui/cn/resizable-navbar/ResizableNavbar";
export function ResizableNavbarExample() {
return (
<ResizableNavbar NavbarButton="primary" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
Navbar | { children, className? } | — | Wrapper: injeta `visible` nos filhos via scroll |
NavBody | { children, className?, visible? } | — | Barra desktop que encolhe (spring width/y/shadow) |
NavItems | { items: {name,link}[], className?, onItemClick? } | — | Links com pílula de hover (layoutId compartilhado) |
MobileNav / MobileNavHeader / MobileNavMenu / MobileNavToggle | — | — | Conjunto mobile: header, menu colapsável e botão sanduíche |
NavbarLogo | — | — | Marca neutra (quadrado patina + rótulo) |
NavbarButton | { href?, as?, variant?: 'primary'|'secondary'|'dark'|'gradient' } | — | CTA em 4 variantes |
Resizable Navbar — role dentro do quadro; a barra encolhe ao passar de 100px
Role para ver a barra encolher
Parágrafo 1 — conteúdo de exemplo para gerar altura de scroll suficiente e disparar a transição de resize da navbar ao passar dos 100px.
Parágrafo 2 — conteúdo de exemplo para gerar altura de scroll suficiente e disparar a transição de resize da navbar ao passar dos 100px.
Parágrafo 3 — conteúdo de exemplo para gerar altura de scroll suficiente e disparar a transição de resize da navbar ao passar dos 100px.
Parágrafo 4 — conteúdo de exemplo para gerar altura de scroll suficiente e disparar a transição de resize da navbar ao passar dos 100px.
Parágrafo 5 — conteúdo de exemplo para gerar altura de scroll suficiente e disparar a transição de resize da navbar ao passar dos 100px.
Parágrafo 6 — conteúdo de exemplo para gerar altura de scroll suficiente e disparar a transição de resize da navbar ao passar dos 100px.
Parágrafo 7 — conteúdo de exemplo para gerar altura de scroll suficiente e disparar a transição de resize da navbar ao passar dos 100px.
Parágrafo 8 — conteúdo de exemplo para gerar altura de scroll suficiente e disparar a transição de resize da navbar ao passar dos 100px.
Parágrafo 9 — conteúdo de exemplo para gerar altura de scroll suficiente e disparar a transição de resize da navbar ao passar dos 100px.
Parágrafo 10 — conteúdo de exemplo para gerar altura de scroll suficiente e disparar a transição de resize da navbar ao passar dos 100px.
Parágrafo 11 — conteúdo de exemplo para gerar altura de scroll suficiente e disparar a transição de resize da navbar ao passar dos 100px.
Parágrafo 12 — conteúdo de exemplo para gerar altura de scroll suficiente e disparar a transição de resize da navbar ao passar dos 100px.