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

Spruce

Landing page for our Design Sprint service offering.  Uses in scrolling tracks to navigate content in place of default vertical browser scrolling without using hijacking.

Spruce Rapid

This project features an horizontal timeline of events. You can navigate it by scrolling vertically: the horizontal timeline view and the vertical list stay in sync. The vertical list shows extra events, notes and links.

The timeline is CMS based: there are two collections, one for the events, and one for the categories of events. Each year of the timeline is made out of one Collection List.

This demo uses real data from Webflow's updates: new features, announcements, events...

There's more info about how it was built and how it works with CMS and CSS Calc at the bottom of the page. The technique for the horizontal scrolling sticky section can be found in the "Sticky + Horizontal Scroll Demo" project on my profile.

You can clone this project, delete the data in the Events and in the Categories Collections, and make this site your own.

CMS Timeline Template

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

Watch tutorial at https://www.youtube.com/watch?v=MlbGahCU_mo

Horizontal Accordion

Hey everyone!

I've been seeing this nifty trend on Dribbble wherein the top nav has this transparent area around an indicator on the active state so that you can see whatever is behind the link (i.e., image, color, etcetera). However, what I haven't seen is what these sections might look like when interacted with, or as the user goes down a page. So, I built it out for fun, and I've included a super trendy vertical indicator, which indicates where the user in the page, just for kicks.

Thanks for taking a look, and let me know what you think in the comments!

Note: If you clone this project and want to add sections, you'll need to duplicate the 2.0 interaction and apply it to the new section, and add a new link block in the vertical nav that directs to the new section. Otherwise, duplicating this project is as easy as clicking the clone button!

Trendy Top Nav with Vertical Indicators

Trendy Top Nav with Vertical Nav Indicator

Responsive slider splitting vertically, with custom code to change slides by scrolling.

Cloneable :)

Photos credit: https://unsplash.com/@sandrokatalina

Split slider

Vertical Split Slider

Timeline of major events for Stack Exchange and Stack Overflow

stackexchange-timeline

Designflow agency

This is our 12th cloneable design! 🎉🚀 Use it for free and do whatever you want with it.

Check it out: https://minimal-navigation.webflow.io/
Vertical Navigation can be a simple way to enhance your site experience through delightful interactions.

This template is made with:
✔️ Unsplash images

Follow me for more Webflow freebies in the future 💙


Minimal-Navigation

Minimal Navigation — Cloneable # 12

Add Infinite Vertical Hero animation in your site by cloning this component.

By Brikflow library build webflow websites in minutes by copy from our library and paste them directly to your webflow project.

For Support 
mrameez820@gmail.com

Infinite Vertical Animation

Gorden's Amazing Site

gordens-amazing-site

Bookmark

Native Vertical Slider in @webflow

025 - 100 days of @webflow interactions

Inspired by: Bookmark for Centiment

----------------- 

Are you a creative director looking to develop your designs with Webflow? Let’s chat
 🔷 https://calendly.com/bookmark-wf/webflow-chat

Discover vertical websites built by the Webflow community

Discover vertical websites built by the Webflow community