💻
Code Examples
Copy and paste these examples to get started quickly
Top Progress Bar
Classic top bar, animating left to right
<NavigationProgress direction="top-to-right" color="#3b82f6" />Bottom Progress Bar
Bottom positioned, right to left animation
<NavigationProgress direction="bottom-to-left" color="#ec4899" />Left Vertical Bar
Vertical bar on the left side
<NavigationProgress direction="left-to-bottom" color="#10b981" containerClassName="w-1" />Right Vertical Bar
Vertical bar on the right side
<NavigationProgress direction="right-to-top" color="#f59e0b" containerClassName="w-1" />Thick Progress Bar
Thicker bar with custom styling
<NavigationProgress color="#8b5cf6" containerClassName="h-2" />Gradient Effect
Using Tailwind for gradient effects
<NavigationProgress color="transparent" progressClassName="bg-linear-to-r from-purple-500 to-pink-500" />📝Complete Example
Here's a complete example showing how to set up the package in your Next.js app
app/layout.tsx
import { NavigationProgress } from 'next-progressbar-link';
import './globals.css';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<NavigationProgress
direction="top-to-right"
color="#8b5cf6"
/>
{children}
</body>
</html>
);
}app/page.tsx
import Link from 'next-progressbar-link';
export default function Home() {
return (
<main>
<h1>Welcome!</h1>
<nav>
<Link href="/about">About</Link>
<Link href="/contact">Contact</Link>
</nav>
</main>
);
}