DEV Community

Cover image for Creating an animated navbar inspired by Vercel using React (Next.js v13), Framer-Motion, and Tailwind CSS

Creating an animated navbar inspired by Vercel using React (Next.js v13), Framer-Motion, and Tailwind CSS

Ashirvad Bhushan on August 09, 2023

While building web apps, I usually like to take inspiration from other sites. I'm always fascinated by beautifully designed websites with subtle ye...
Collapse
 
greggcbs profile image
GreggHume • • Edited

I am going to leave some friendly comments for writing updates that i think could really make a difference to the readers :)

Collapse
 
asheeshh profile image
Ashirvad Bhushan •

thanks for all the suggestions, this is why i love the dev community <3

Collapse
 
greggcbs profile image
GreggHume •

Let's break down the code. The first thing you need to do is import your Navbar component in your layout import NavBar from "@/components/navbar";. The "@" here is an import alias you can set while scaffolding your app.

I dont think you need to explain imports to developers, i think developers working with next should know imports and aliases. Unless you have experienced developers wanting to know this?

Collapse
 
asheeshh profile image
Ashirvad Bhushan •

actually import aliases are kinda newly added to next.js, wasn't sure if everyone would know this

Thread Thread
 
greggcbs profile image
GreggHume • • Edited

Is 3 years ago newish though? Aliases have been around since around 2016.
nextjs.org/blog/next-9-4

Thread Thread
 
asheeshh profile image
Ashirvad Bhushan •

the option to change/add import alias through the cli itself was added recently, my bad

Collapse
 
koga73 profile image
AJ •

Here is a pure HTML / CSS implementation. No javascript needed!
codepen.io/koga73/pen/ZEVpzab?edit...

Collapse
 
asheeshh profile image
Ashirvad Bhushan •

impressive, there's a small bug though you cant move left when youre on about or contact tab, nice work anyways :)

Collapse
 
manojadams profile image
Manoj •

Any github links will be useful.

Collapse
 
asheeshh profile image
Ashirvad Bhushan •

actually, the code for v2 of my personal site is private as it's a wip. but i can create one with only the navbar for you if you need, you need the code for the entire thing or something specific?

Collapse
 
pixl profile image
px •

Well done. Thanks for sharing

Collapse
 
sammyfilly profile image
Ethereum •

Can you make vercel headless to make it compatible with turbo

Collapse
 
asheeshh profile image
Ashirvad Bhushan •

Why is it not compatible with turbo? can you elaborate what you're trying to say please?

Collapse
 
adetimmy_ profile image
Adetimmy •

Nice!!!

Collapse
 
idjohnson profile image
Isaac Johnson •

FWIW, i had some errors resolving Navbar:

Failed to compile.
./src/app/layout.tsx
Module not found: Can't resolve '@/components/navbar'

For me, needed to add 'app' to the path:

import "./globals.css";
import NavBar from "@/app/components/Navbar";
Enter fullscreen mode Exit fullscreen mode
Collapse
 
phuongdanh profile image
Phuong Danh •

This's great post, thanks for sharing

Collapse
 
ygntechstartup profile image
YGN •

Confused about the web dev can you help me out with the right roadmap