Type to Go
Type where you want to go, and it takes you there.
Features
- A search field that is the navbar
- Type a section name and press Enter to jump
- Typewriter hints cycle through the destinations
- Works with the keyboard alone
Best for: Docs, dashboards and sites with many pages, where typing beats hunting through menus.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | - | Your logo. It inherits currentColor. |
| items | NavItem[] | - | One link per section, in page order: label and #id href. |
| cta | { label: string; href: string } | - | Optional call-to-action button. |
| className | string | - | Extra classes for the outer element. |
FAQ
Is the Type to Go navbar free to use?
Yes. Type to Go is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Type to Go work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Type to Go in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Type to Go need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Type to Go accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.