Discover the best side-nav websites created by professional designers. Get inspired and start planning your perfect side-nav web design today!

Took Nelson's challenge to customize the nav component, and it turned out an awesome nav design :)

Nav challenge

NAV challenge

Get the code to keep the navbar open or closed from page to page, remembering its state on the previous page by signing up for T.RICKS Patreon at https://www.patreon.com/timothyricks

T.RICKS Side Nav

Hey Webflow,

I quickly created this cloneable site to help answer a question on our forums:
https://forum.webflow.com/t/vertical-slider-with-pagination-on-the-right-side/45423

The solution allows users to click on the menu dots on the right hand side to access different sections throughout the site.

This solution was inspired by the following site: http://www.thepathfinders.world/

Hopefully this helps :blush:

Best regards,
Micah

Vertical Menu with Section Selection

A slick side nav with hover interactions on the nav buttons.

007 Navigation

Draft for an experimental "double slider" I will use for an e-commerce website that showcases a range of great products.

Feel free to clone and customize. Bg-color adaptable, png files (each side) to be prepared in photoshop. 

(Image rights are with the product producers)

Clone: Double slider interaction

Clone: Double-slider interaction (draft)

Clean, minimal cloneable with subtle animations, strong typography and a custom slide-in side nav bar.

Features :
- 90+ Score on google lighthouse
- Custom Nav-Bar
- Clean Design
- Figma File | 

https://www.figma.com/community/file/1125377624721190692

Salon 256

Salon 256 - Service Business Cloneable

Welcome to daily interaction #92!

I love 3d-effects! This one was a lot of fun. It’s just a simple 3d box that rotates in the center of the viewport as the user moves their mouse around. It took me a moment to get the 3d box to rotate from the center until I applied a color to the cube wrapper and saw that the cube was sitting on top of the wrapper rather than in the center. So I moved each side of the box forwards 50px since each side is 100px by 100px. This placed each side in the center of the wrapper so when the wrapper rotates the cube rotates from the center :D. I moved each side forward 50px on the z-index. I could have placed the sides in another wrapper and moved that wrapper forwards 50px on the z-axis, but I thought moving each side forward would allow for more creativity afterwards :). I also left all the sides grey. I had many ideas for different colors, text, or images that could be placed on each side, but I wanted to focus more on the actual animation.

WebDev for You - Daily Interaction #92

WebDev For You - Daily Interaction #92

I created this clonable fixed side nav project for everyone. 

The idea is to create a simple solution vertical navigation system for Webflow websites. 

Important to know:
- Each link follows an ID that represents a section. 
- Like this project
- Write to me if you need help!

Cheers,

Vertical Nav or Side nav

webflowverticalnav

Simple mega menu using Webflow native nav bar and drop-downs, mobile ready!
Feel free to clone it, adjust and change content to your needs

Need any help ? contact me on the bottom right button :)

megamenu

Mega menu using Webflow Nav bar

Your Side

Feelings 

This navigation opens when you hover over the dark blue bar on the left side.
(not responsive yet)

Atelier Kleinbasel

Hover Navigation (technical prototype)

A project for the webflow party challenge
https://webflow-party.circle.so/c/the-party/challenge-2

I used
Finsweet client first system
Finsweet attributes slider

Original project
https://f1fan.webflow.io/

What’s the difference?
- Free 3D asset for the cars
- The fonts I used formula condensed and extended from https://pangrampangram.com which are free for personal projects but you can download them. I used Bebas neue and Orbitron from google fonts as free alternatives.

Big mask text
https://thedesignersfoundry.com/super
A premium font and converted them to svg.

Process on youtube
1. Design https://youtu.be/ANReasCcAIU
2. Build https://youtu.be/LtGDkW0v2UU

Unresolved issues:
- For the slider, I enabled keyboard navigation. But, the text animation does not work.
- Active slider nav item will not show if you navigate to an item outside of your screen with the arrow keys.
- I tried to use a CMS collection on a separate page but the nav item does not show. 

F1FAN-clone

f1fan-clone

Fixed Side Nav Test

A simple single-page website for my wife's Psychology private practice business. The brief was for a calming and welcoming website with a side-nav and a clean and simple single-page layout.