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

Info: I disabled the browser's default scroll bar on the desktop breakpoint using Custom CSS. 

You'll find the YouTube Tutorial here: https://youtu.be/l8cjr6lP9yk

Vertical Navbar with Progress Bar

Vertical Navbar for Scrollytelling One Pager with Progress Bar

In this episode of What In Webflow 014, we walk-through how to create a reactive text effect in Webflow: https://youtu.be/8-9rX4PjnXM

To walk-through this tutorial with me, make sure you use the cloneable project at https://webflow.com/website/Reactive-Type-Effect

Also, you can find a more comprehensive tutorial at https://www.superhi.com/video/how-to-make-reactive-type-as-seen-on-the-airbnb-cereal-site

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

I'm happy to help further!

Reactive Type

Reactive Type Effect

This was inspired by the following CodePen: https://codepen.io/farmok/full/aYbKOO

Learn about how I used the BEM naming convention to create the page in the following YouTube video: https://www.youtube.com/watch?v=gcKprnFVCUQ

Also, feel free to ask any questions

Clipped Text CodePen

Background Images with Clipped Text

In this episode of What In Webflow 013, we walk-through how to integrate custom code to have a canvas to draw on in Webflow

To walk-through this tutorial with me, make sure you use the cloneable project at https://webflow.com/website/Canvas-in-Webflow

Also, you can find a more comprehensive tutorial at https://www.superhi.com/video/how-to-draw-and-paint-using-html-canvas

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

I'm happy to help further!

Canvas in Webflow

Webflow build based on this Dribbble shot by Francesco Zagami
https://dribbble.com/shots/15461202-Portfolio-Turi-L-vik-Kirknes

Tutorial for this is live on Patreon
https://www.patreon.com/timothyricks

Vertical Slider

Saw this cool interaction by UI8 on Dribbble and had to try and recreate it! I liked this concept as a hero space, so I added a modern nav to it that goes vertical on MVP to compliment the space. Let me know what you think in the comments, and clone away!

Design credit: "Call to Action" by Anton Tkachev for UI8 (https://dribbble.com/shots/6479771-Qaitomo-Call-To-Action),

Call to Action

Rad Mouse Movement Hero! - Joshwork Dribbble series ft. UI8

Vertical Text Infinite Scroll Animation inspired by Brave New Lit Website.

Reference Link: https://www.bravenewlit.xyz/

This project is only for learning, inspiration and help purpose!

Vertical Text Infinite Scroll Animation

Marquee Infinite Scroll Menu created with webflow interactions, you can see hidden text on hover!

Clone and enjoy!

Marquee Infinite Scroll Menu

Marquee Infinite Scroll Menu - Cloneable

Welcome to daily interaction #89!

So I switched back to a darker background with the shapes background. Let me know what you think!

This demo showcases a vertical menu with an underline animation on hover. Each menu item has a title and a phrase. An underline appears under the title and the phrase at the same time, and scales back on hover out. The phrase also moves a bit to the right on hover.

This demo was inspired by this Codrops demo: https://tympanus.net/Development/MenuHoverEffects/

To view more daily interactions and premium content visit: https://www.webdevforyou.com/

WebDev for You - Daily Interaction #89

WebDev For You - Daily Interaction #89

Welcome to Daily Interaction #119.

This demo showcases a menu item animation on hover.

With this demo two vertical lines appear on the left and right of the menu item, and afterwards two horizontal lines appear on the top and bottom of the menu item on hover. The left and right sides scale in from the center and the top and bottom lines scale in from the left. There is a slight delay to the top and bottom lines to add a bit more style to the animation. The 4 lines around the menu item are div block that are absolutely position and placed on each side of the menu item. All of the div blocks have a width or height of 2px depending on whether the line is vertical or horizontal. The scaling animations were applied via interactions.

Inspired by 'Caliban' menu here: https://tympanus.net/Development/LineMenuStyles/

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev for You - Daily Interaction #119

WebDev For You - Daily Interaction #119

To hide elements you can use opacity or display none, now let's build daily interaction #21!

This demo showcases various panels that expand using flexbox to reveal a vertical menu.

To view more daily interactions and premium content visit: https://www.webdevforyou.com/

WebDev For You - Daily Interaction #21

Another #mobilefirst nav I designed, nice big fat buttons :)
Would love everyone's thoughts on it. :)

Vertical Nav Square

Vertical Square Nav

Film photography website highlighting negative space, minimal design, and vertical menu bar. Less is more.

Rita P Harper

Rita Harper Photography

This was a complete re-design for a retail management SAAS company. The main objectives were to give a high-level view of the Connect Oasis suite while giving users an easy pathway to view the solutions by problem, value or vertical. 

The mega-dropdown menus are my favorite part of this site.

Connect Oasis

SAAS Website - Connect Oasis

A quick example of a way to style vertical text without using a rotate transform