DEV Community

How to design a simple and beautiful Navbar using NextJS and TailwindCSS

Andrés Espejo on December 24, 2020

Definitely NextJS has positioned itself as the best React framework at present, offering all the benefits of the library we love so much, in addit...
Collapse
 
heymarkkop profile image
Mark Kop

In this example we're using only the Home page. What if I want to use the NavBar for every page?
Should I import it on _app.js or _document.js?

Collapse
 
andrewespejo profile image
Andrés Espejo

In that case is better that you create a Layout in the Pages folder, if you need more help please let me know

Collapse
 
aegirorn profile image
aegirorn

I tried this code which works nicely. Thank you very much.

But I seem to have a problem when it gets down to mobile size. Then the hamburger no longer works - it cannot be clicked. The hamburger works fine in tablet size. Any idea why this is and how to fix it?

Collapse
 
tiaxter profile image
tiaxter • Edited

Hi, I tried this code. And it works nicely. To obtain a menu opening transition I added useRef hook, and so when active set the menu content height equal to refElement.current.scrollHeight + 'px'.

Here my example:
dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
kirtirajsinh profile image
kirtirajsinh

Can you share the useRef function. it'll be helpful

Collapse
 
shadowtime2000 profile image
shadowtime2000

NextJS has built in PostCSS support so why are you running PostCSS from the command line?

Collapse
 
andrewespejo profile image
Andrés Espejo

I prefer using a different file that tailwind.css, but you're right. You can work directly with the tailwind.css file and you don't need to run Postcss from the command line :D

Collapse
 
luisrieke profile image
Luis Rieke

Just wanted to say thank you ❤️ This was perfect!

Collapse
 
josignat profile image
José Ignacio

Hola, yo estoy usando el componente Image para el logo como puedo darle estilos con Taildwind? Probé con className pero no funcionó tampoco con css module

Collapse
 
adedayo888 profile image
dayo adeniji

Very useful resource, Thank You.
Ade

Collapse
 
frankismartinez profile image
frank martinez

Just borrowed your mobile menu approach for a Web3 Dapp... gracias!

Collapse
 
isaactait profile image
Isaac Tait

I implemented this on iloveto.fish Thank you! Great work :D

Collapse
 
xnox profile image
Everton Sales

After testing lots and lots of NavBars, this one is the best. Thank you

Collapse
 
nashthecoder profile image
Nash The Coder

thank you so much for this blog. It has really helped me with a project I am working on.

Collapse
 
akilesh profile image
Akilesh

I have been developing web applications for 2 years now. Tailwind and your blog made my work much easier thanks to that.

Collapse
 
robbyph profile image
Robby • Edited

Any suggestions for animating/transitioning this? I've tried using HeadlessUI and React-Transition-Group and neither have worked with this tutorial.

Collapse
 
r11 profile image
Peter Jaffray

I added an overlay and then
<div
className="fixed inset-0 bg-gray-800 navbar-backdrop opacity-80"
onClick={handleClick}
<
</div>