diff --git a/Gemfile.lock b/Gemfile.lock
index b3bc782c3..807601d50 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (8.0.0.dev.467d57d)
+    ably-ui (8.0.0.dev.c4285c3)
       view_component (>= 2.33, < 2.50)
 
 GEM
diff --git a/lib/ably_ui/version.rb b/lib/ably_ui/version.rb
index 770315ca1..2455070b7 100644
--- a/lib/ably_ui/version.rb
+++ b/lib/ably_ui/version.rb
@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '8.0.0.dev.467d57d'
+  VERSION = '8.0.0.dev.c4285c3'
 end
diff --git a/package.json b/package.json
index fc9ff69d9..68394e909 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "8.0.0-dev.467d57d",
+  "version": "8.0.0-dev.c4285c3",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
diff --git a/preview/Gemfile b/preview/Gemfile
index b11993bb2..5189d60ab 100644
--- a/preview/Gemfile
+++ b/preview/Gemfile
@@ -36,7 +36,7 @@ gem 'view_component', '~> 2.33.0', require: 'view_component/engine'
 
 gem 'responders'
 
-gem 'ably-ui', '8.0.0.dev.467d57d', require: 'ably_ui'
+gem 'ably-ui', '8.0.0.dev.c4285c3', require: 'ably_ui'
 
 # https://stackoverflow.com/questions/71191685/visit-psych-nodes-alias-unknown-alias-default-psychbadalias
 gem 'psych', '< 4'
diff --git a/preview/Gemfile.lock b/preview/Gemfile.lock
index f8b5ff48d..00a7782f2 100644
--- a/preview/Gemfile.lock
+++ b/preview/Gemfile.lock
@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    ably-ui (8.0.0.dev.467d57d)
+    ably-ui (8.0.0.dev.c4285c3)
       view_component (>= 2.33, < 2.50)
     actioncable (6.0.5.1)
       actionpack (= 6.0.5.1)
@@ -171,7 +171,7 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
-  ably-ui (= 8.0.0.dev.467d57d)
+  ably-ui (= 8.0.0.dev.c4285c3)
   bootsnap (>= 1.4.2)
   byebug
   dotenv-rails
diff --git a/preview/package.json b/preview/package.json
index 20a561146..fcbc98f22 100644
--- a/preview/package.json
+++ b/preview/package.json
@@ -2,7 +2,7 @@
   "name": "preview",
   "private": true,
   "dependencies": {
-    "@ably/ui": "8.0.0-dev.467d57d",
+    "@ably/ui": "8.0.0-dev.c4285c3",
     "@babel/preset-react": "^7.12.5",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "4.3.0",
diff --git a/preview/yarn.lock b/preview/yarn.lock
index 26a2fa900..3aa6a0d17 100644
--- a/preview/yarn.lock
+++ b/preview/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@ably/ui@8.0.0-dev.467d57d":
-  version "8.0.0-dev.467d57d"
-  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-8.0.0-dev.467d57d.tgz#e237f3aee3ad3e7345296530fdc28a5f5a45588b"
-  integrity sha512-+sqh1g3Q8/s9UpPhG7mzs0OdfsjqYZ8bfRdAeCaUelJGpoewBoQY5fHL1KtTJX6AGIaTSnPotqOf9EyGwDJqPw==
+"@ably/ui@8.0.0-dev.c4285c3":
+  version "8.0.0-dev.c4285c3"
+  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-8.0.0-dev.c4285c3.tgz#8d123ac99ac02a7fe4e0b7790e7edaccc0ee6420"
+  integrity sha512-dfHthVNTCt8e1s2QYGgFFPBIcL0VRQV9LXJRFJilEP5TTYV1eWfzBCpxE85goI5RHKWpnhfcbXPsYohUBmcp2w==
   dependencies:
     addsearch-js-client "^0.7.0"
     array-flat-polyfill "^1.0.1"
diff --git a/src/core/MeganavSearchSuggestions/component.js b/src/core/MeganavSearchSuggestions/component.js
index 68dfe8330..f7426883a 100644
--- a/src/core/MeganavSearchSuggestions/component.js
+++ b/src/core/MeganavSearchSuggestions/component.js
@@ -18,15 +18,16 @@ const getDistance = (e, touchStartX) =>
 
 const withinBuffer = (distance) => Math.abs(distance) < DRAG_BUFFER;
 
+const getItemsTotalWidth = (nodes) =>
+  nodes
+    .map((item) => item.getBoundingClientRect().width)
+    .reduce((acc, val) => acc + val, 0);
+
 const MeganavSearchSuggestions = () => {
   const suggestionsToggle = queryId("meganav-mobile-search-input");
   const suggestions = queryId("meganav-mobile-search-suggestions");
   const list = suggestions.querySelector("ul");
-  const listItems = list.querySelectorAll("li");
-
-  const itemsTotalWidth = Array.from(listItems)
-    .map((item) => item.getBoundingClientRect().width)
-    .reduce((acc, val) => acc + val, 0);
+  const listItems = Array.from(list.querySelectorAll("li"));
 
   const dragLeft = (distance, threshold) => {
     const currentTranslateX = getTranslateX(list);
@@ -50,6 +51,7 @@ const MeganavSearchSuggestions = () => {
     const listWidth = list.getBoundingClientRect().width;
     const currentTranslateX = getTranslateX(list);
     const translateX = Math.round(currentTranslateX + distance);
+    const itemsTotalWidth = getItemsTotalWidth(listItems);
 
     if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {
       return;
@@ -61,6 +63,7 @@ const MeganavSearchSuggestions = () => {
   const dragRightEnd = (distance, threshold) => {
     const listWidth = list.getBoundingClientRect().width;
     const currentTranslateX = getTranslateX(list);
+    const itemsTotalWidth = getItemsTotalWidth(listItems);
     let translateX = Math.round(currentTranslateX + distance);
 
     if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {
@@ -99,11 +102,18 @@ const MeganavSearchSuggestions = () => {
     suggestions.classList.remove("max-h-96");
   };
 
+  const wheelHandler = (e) => {
+    const distance = e.deltaY * 4;
+    if (withinBuffer(distance)) return;
+    distance > 0 ? dragLeftEnd(distance, 24) : dragRightEnd(distance, 48);
+  };
+
   suggestionsToggle.addEventListener("focus", focusSuggestionsHandler);
   suggestionsToggle.addEventListener("blur", blurSuggestionsHandler);
   suggestions.addEventListener("touchstart", touchstartHandler);
   suggestions.addEventListener("touchmove", touchmoveHandler);
   suggestions.addEventListener("touchend", touchendHandler);
+  suggestions.addEventListener("wheel", wheelHandler);
 
   return {
     teardown: () => {