diff --git a/src/components/nav-menu.css b/src/components/nav-menu.css
index 0e8e302f..24bc1349 100644
--- a/src/components/nav-menu.css
+++ b/src/components/nav-menu.css
@@ -88,3 +88,7 @@
 .sparkle-icon {
   animation: sparkle-icon 0.3s ease-in-out infinite alternate;
 }
+
+.nav-submenu {
+  max-width: 14em;
+}
diff --git a/src/components/nav-menu.jsx b/src/components/nav-menu.jsx
index ffe373cf..0a4bb570 100644
--- a/src/components/nav-menu.jsx
+++ b/src/components/nav-menu.jsx
@@ -210,6 +210,7 @@ function NavMenu(props) {
               )}
               {lists?.length > 0 ? (
                 <SubMenu
+                  menuClassName="nav-submenu"
                   overflow="auto"
                   gap={-8}
                   label={
@@ -244,6 +245,7 @@ function NavMenu(props) {
                 <Icon icon="bookmark" size="l" /> <span>Bookmarks</span>
               </MenuLink>
               <SubMenu
+                menuClassName="nav-submenu"
                 overflow="auto"
                 gap={-8}
                 label={