Vertical Navigation Expansion

Design help Animations & Interactions
1

Hi there, I’m new to webflow and I’m trying to mimic the way the vertical navigation is setup on this website: Display — Works

When you click one of the tabs, it creates a seamless transition.
Any help is greatly appreciated!!
Cam

Here is my public share link: LINK
(how to access public share link)

2

Hey Cam,

I’d describe this as a horizontal accordion layout. If you google “Webflow accordion” you’ll find the basic vertical layout technique that designers often use for FAQ sections. You’re just scaling that up to fill the page, and rotating it 90 degrees.

Your best resource for creative layouts like this is probably Webflow’s template library and cloneable websites under the Made in Webflow showcase. If you find something there, clone or purchase it, to learn how it works. It’s well worth it and there are some fabulous designers to learn from.

In general, it’s not easy to work with overlapping content areas like this because the designer canvas cannot switch between contextual states ( tab 1 open, tab 2 open, etc. ) like you’re seeing here.

You’ll need to learn Webflow’s Interactions and Symbols especially, as well as the designer itself, to do this well

A few tips that might help you think through your approach-

  • Separate and build each part individually, and then aggregate it into the main page accordion view, where everything overlaps.
  • Start with the content areas first, i.e. the 3 main “tab body” areas.
  • Create those as symbols, so that you can position them in the accordion, but also edit them outside of that accordion view. I create hidden (draft) pages for this purpose, so that it’s easy to go change, e.g. the About Us content without having to fight the accordion UI to access it.
  • Once you have your 3 main content area symbols on another page, let’s call them Home, About, and Contact ( for kicks ), you’ll build your one-page accordion design.

On your homepage, I imagine I’d organize it like this-

  • DIV - #tab1
  • DIV - #tabPage1
    • SYMBOL - Home
  • DIV - #tab2
  • DIV - #tabPage2
    • SYMBOL - About
  • DIV - #tab3
  • DIV - #tabPage3
    • SYMBOL - Contact

Those #ref references are the ID’s which you’d want to assign, to provide an easy target for your interactions. Notice how I am placing the SYMBOLs inside of DIVs, so that they’re separate. That way you can re-organize your content any time you want, and your SYMBOLs are unaffected by your Interactions. They’re just inside moving containers.

You’d position and arrange everything the way you want, e.g. 100vh to fill the screen vertically and so on- which I’m guessing you know well. Webflow supports all of those details in the designer.

Then, last, is your interactions, and that’s the juicy bit. Prepare to watch a lot of videos and try a lot of stuff, but I think you can create exactly the effect you’re looking for.

Once it’s built, leave the homepage as your final view, and edit your symbol content on hidden (draft) pages instead. You’ll get full WYSIWYG access that way and you can use all of the features of Webflow freely there like changing responsive breakpoints and so on.

1 Like
3

Wow, thank you so much for all this great information. Really appreciate all your help! I’ll give these suggestions a try!