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

ashish 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
ashish

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
ashish

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
ashish

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

Collapse
 
greggcbs profile image
GreggHume • Edited

I find it easier to read articles if some of the code snippets are grouped rather than split up. Seeing as a user must run all of these in sequence its nice to see them together.

# create next app
pnpm create next-app@latest

# install framer
pnpm i framer-motion

# run dev server
pnpm dev
Enter fullscreen mode Exit fullscreen mode
Collapse
 
greggcbs profile image
GreggHume • Edited

Its nice to show the folder and file structure up front and tell readers what folders and files to create:

Create the layout and navbar components like so:

├── app
    ├── layout.tsx
    ├── globals.css
    ├── components
        ├── Navbar.tsx
Enter fullscreen mode Exit fullscreen mode
Collapse
 
asheeshh profile image
ashish

noted !

Collapse
 
greggcbs profile image
GreggHume

It would be nice if you put a gif or the video of how this works first so we can see what this is about so we can decide if we want to read further - rather than having the video at the end :)

Collapse
 
asheeshh profile image
ashish

makes sense, adding the video to top as well :)

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
ashish

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

Collapse
 
pixl profile image
px

Well done. Thanks for sharing

Collapse
 
manojadams profile image
Manoj

Any github links will be useful.

Collapse
 
asheeshh profile image
ashish

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
 
adetimmy_ profile image
Adetimmy

Nice!!!

Collapse
 
phuongdanh profile image
Phuong Danh

This's great post, thanks for sharing

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
 
sammyfilly profile image
Ethereum

Can you make vercel headless to make it compatible with turbo

Collapse
 
asheeshh profile image
ashish

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

Collapse
 
ygntechstartup profile image
YGN

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