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

Jomor Design is a magical land where wondrous branding and web design happens. So let’s never stop amusing ourselves.

Jomor Design

Watch the tutorial for this at https://www.youtube.com/watch?v=Wq5mJIHCDFo

T.RICKS Menu + Slider

A WebGL prototype showcasing some amazing artwork by StudioJQ. Just press and drag to explore.

The code is based on an awesome project by creative developer Daniel Velasquez and it is modified to more easily integrate with Webflow.

Original Repo: https://github.com/Anemolo/StickyImageEffect

* You can update the Text, Links, and Images in footer (via page settings).
* Easily modify the effects speed, frequency, etc. in footer (via page settings). 
* I have not done thorough testing so please comment with any feedback and/or issues. 
* All images are subject to Copyright © 2019 ∆ Studio–JQ ∆ (https://dribbble.com/STUDIOJQ)

Update 10/16/19: 1) Clicking links now works on mobile and will no longer activate the sticky effect across all devices.

Sticky Image Showcase

Basic example of how to integrate Swiper.js with Webflow.

Swiper Thumbs

Swiper Showcase Example

Cloneable rebuild of https://www.dillinger.tv/

Variable Fonts

Variable Font Interactions

Wanted to play around with the new interaction types in IX2, and as always got a little carried away. All the design credit goes to M S Brar's "Capture Moments" (https://dribbble.com/shots/6291284-Capture-Moments), which I tasked myself with building as reference. Really happy with how it came out.

Peep the microinteractions on the menu button and the funky scroll indicator (which changes to reflect the device type you're on 😍).

Lemme know what you think in the comments!

Capture Moments - M S Brar - Dribbble Series

NEW Slider Interactions! - Dribbble Series Ft. M S Brar

Parallax Menu

A fancy full-screen Webflow navigation menu, which is completely responsive and can also be used from a desktop breakpoint.

The custom open and close animation with an animated background gradient gives the navigation menu an additional character of its own. 

Check out the tutorial here on my channel:
https://youtu.be/XiPq7BcyOPs

Responsive Fullscreen Webflow Navigation With Custom Animation

Responsive full-screen Webflow navigation menu

Keeping it simple again this week, this time 100% native Webflow.

✅ Native Interactions
🚫 Custom Code

--

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

3D Spiral Menu

MM—012: 3D Spiral Menu

Rebuild of the https://k72.ca/en nav menu

This cloneable is for learning purposes only. I do not own the rights to this design and content.

K72 Menu

Custom animated hamburger menu concepts made 100% in Webflow using the navbar interaction. Please feel free to clone and use these on your own site.

Custom Animated Hamburger Menus in Webflow

Custom Hamburger Menus

100% Webflow IX2 full-screen menu. I've tried to keep the layout and interactions as straightforward as possible so it can be cloned and more easily integrated across different projects. 
  
* Works on both desktop and mobile
* Original Inspiration: www.Varagon.com

Immersive Menu

You'll find here all the experiments made to answer public questions on the Webflow forum

My Sandbox

My Webflow Sandbox

Played around with a full screen menu. Was also able to make it sort of responsive as it shifts to the right side on mobile.

Full screen Menu Navigation

Full Screen Menu Navigation

playing around with a project menu driven by the cursor position, with some lottie animations for fun!

ichta

Portfolio showcase template (WIP)

Rebuild of https://www.awwwards.com/annual-awards-2021 winners menu.

Menu Hover Effect

Basic fullscreen menu with inspiration from developer Rune Hoffman

Menu Concept

'Another Menu' Pt. 1

Ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.

- Easily modify the SVG colors in each page' custom code panel (header).
- Easily create a transition for your menu links (I've just defaulted to opacity).
- Demo 6 demonstrates how to prevent multiple clicks (getting menu out of sync), using a simple Webflow interaction.
- Demo 7 demonstrates how to use the effect as a page transition.

Code modified from its original form to integrate seamlessly with Webflow. 

Original Code By Yoichi Kobayashi (http://www.tplh.net/)