DEV Community

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

Read full post

GreggHume • Aug 10 '23 • Edited

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

ashish • Aug 10 '23

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

GreggHume • Aug 10 '23

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?

ashish • Aug 10 '23

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

GreggHume • Aug 10 '23 • Edited

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

ashish • Aug 10 '23

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

GreggHume • Aug 10 '23 • 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

ashish • Aug 10 '23

noted !

GreggHume • Aug 10 '23 • 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

GreggHume • Aug 10 '23

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 :)

ashish • Aug 10 '23

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

Manoj • Aug 12 '23

Any github links will be useful.

ashish • Aug 12 '23

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?

AJ • Sep 2 '23

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

ashish • Sep 6 '23

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

px • Aug 17 '23

Well done. Thanks for sharing

Adetimmy • Aug 11 '23

Nice!!!

Isaac Johnson • Sep 2 '23

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";

Ethereum • Aug 13 '23

Can you make vercel headless to make it compatible with turbo

ashish • Aug 13 '23

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

Phuong Danh • Aug 12 '23

This's great post, thanks for sharing