Components
Loading preview...
A sleek, animated navbar that slides down and increases its padding on scroll, creating a smooth truncating effect.
@Northstrix
npx shadcn@latest add https://21st.dev/r/maxim.bort.devel/truncating-navbarimport React from "react";
import { TruncatingNavbar as NavbarComponent } from "@/components/ui/truncating-navbar";
const routes = [
{ name: "Vue Version", link: "https://namer-ui-for-vue.netlify.app", external: true },
{ name: "Made by", link: "https://maxim-bortnikov.netlify.app/", external: true },
{ name: "Credit", link: "https://ui.aceternity.com/components/resizable-navbar", external: true },
];
const TruncatingNavbar = () => (
<div className="w-full min-h-[300vh] px-6 mt-20">
<NavbarComponent
icon="https://raw.githubusercontent.com/Northstrix/namer-ui/refs/heads/main/public/logo.png"
appName="Namer"
routes={routes}
homeRoute="https://namer-ui.netlify.app/"
scrolledBg="var(--truncating-navbar-bg-scrolled)"
mobileBg="var(--truncating-navbar-bg-mobile)"
outlineColor="var(--truncating-navbar-outline)"
searchPlaceholderText="Search..."
shortcutKey="M"
onOpenSearch={() => console.log('Search button clicked!')}
zIndex={1}
defaultTextColor="var(--truncating-navbar-text)"
hoverTextColor="var(--truncating-navbar-text-hover)"
hoverBgColor="var(--truncating-navbar-bg-hover)"
searchBtnBg="var(--truncating-navbar-search-bg)"
searchBtnText="var(--truncating-navbar-search-text)"
searchBtnOutline="var(--truncating-navbar-search-outline)"
searchBtnHoverBg="var(--truncating-navbar-search-bg-hover)"
searchBtnHoverText="var(--truncating-navbar-search-text-hover)"
mobileMenuBg="var(--truncating-navbar-bg-mobile-menu)"
mobileMenuText="var(--truncating-navbar-mobile-menu-text)"
mobileMenuHoverBg="var(--truncating-navbar-mobile-menu-bg-hover)"
mobileMenuHoverText="var(--truncating-navbar-mobile-menu-text-hover)"
logoTextColor="var(--truncating-navbar-logo-text)"
logoHoverColor="var(--truncating-navbar-logo-text-hover)"
/>
<div className="mt-12 w-full text-center text-base text-gray-500 font-medium">
Scroll down to see the navbar change!
</div>
</div>
);
export { TruncatingNavbar }