Expanding Bar Navigation Concept

An experimental tab-like navigation concept where a content area is opened with an animation once an item is clicked. Expanding Bar Navigation Concept was written by Mary Lou and


View demo Download source

Today we’d like to share an experimental tab-like navigation with you. The main idea is to animate the bars of the navigation in a way that they expand to reveal some further content. The navigation is either shown in a vertical or horizontal orientation. For this experiment we are using anime.js.

Attention: As we usually do with our Playground demos, this is mainly made for visual effect inspiration, not as a ready-to-use plug’n play component. Modern browsers only.

Here’s a preview of the demos for the view when the navigation is closed and open:





For the third demo, we’re not showing the navigation by default. There is a menu button at the bottom of the page and once clicked, the navigation appears in the center of the page.




We hope you find this little experiment inspirational!

References and Credits

Find this project on Github

View demo Download source

Expanding Bar Navigation Concept was written by Mary Lou and published on Codrops.


Clover Desain is a non commercial website that providing information to its visitors, Clover Desain gathered information from various sources (will be displayed in each content)

All data and information provided on this site is for informational purposes only. Clover Desain makes no representations as to accuracy, completeness, currentness, suitability, or validity of any information on this site and will not be liable for any errors, omissions, or delays in this information or any losses, injuries, or damages arising from its display or use. All information is provided on an as-is basis.

If this content contains any copyright please send us email or message through our social media to take out this content.

And/Or you as the author or the owner of this content and you do not want your content displayed on this website please send us email or message through our social media.

Leave a comment