📚

Documentation

Complete guide to using next-progressbar-link

Loaded in 1567ms

📦Installation

npm install next-progressbar-link

🚀Quick Start

1. Add to your root layout

// app/layout.tsx
import { NavigationProgress, NavigationProvider } from 'next-progressbar-link';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <NavigationProvider>
          <NavigationProgress />
          {children}
        </NavigationProvider>
      </body>
    </html>
  );
}

2. Use the Link component

import Link from 'next-progressbar-link';

export default function MyPage() {
  return <Link href="/about">About</Link>;
}

⚙️Props

Prop	Type	Default
direction	ProgressDirection	"top-to-right"
color	string	"#00b207"
containerClassName	string	""
progressClassName	string	""

💡Examples

Custom Color

<NavigationProgress color="#ec4899" />

Bottom Position

<NavigationProgress direction="bottom-to-right" color="#10b981" />

Vertical Bar

<NavigationProgress direction="left-to-bottom" containerClassName="w-2" />

Try it yourself!

Head to the control panel to experiment with all the options

Control Panel