diff --git a/canon-docs/src/app/(docs)/components/menu/page.mdx b/canon-docs/src/app/(docs)/components/menu/page.mdx
index 98c4949438..524db26cd1 100644
--- a/canon-docs/src/app/(docs)/components/menu/page.mdx
+++ b/canon-docs/src/app/(docs)/components/menu/page.mdx
@@ -155,3 +155,48 @@ You can additionally configure how quickly the menu opens on hover using the `de
     </Menu.Portal>
   </Menu.Root>`}
 />
+
+### Nested navigation
+
+You can nest menus to create a more complex navigation structure.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<MenuSnippet story="Submenu" />}
+  code={`<Menu.Trigger
+    render={props => (
+      <Button
+        {...props}
+        size="small"
+        variant="secondary"
+        iconEnd={<Icon name="chevron-down" />}
+      >
+        Menu
+      </Button>
+    )}
+  />
+  <Menu.Portal>
+    <Menu.Positioner sideOffset={8} align="start">
+      <Menu.Popup>
+        <Menu.Item>Settings</Menu.Item>
+        <Menu.Item>Invite new members</Menu.Item>
+        <Menu.Item>Download app</Menu.Item>
+        <Menu.Item>Log out</Menu.Item>
+        <Menu.Root>
+          <Menu.SubmenuTrigger>Submenu</Menu.SubmenuTrigger>
+          <Menu.Portal>
+            <Menu.Positioner>
+              <Menu.Popup>
+                <Menu.Item>Submenu Item 1</Menu.Item>
+                <Menu.Item>Submenu Item 2</Menu.Item>
+                <Menu.Item>Submenu Item 3</Menu.Item>
+              </Menu.Popup>
+            </Menu.Positioner>
+          </Menu.Portal>
+        </Menu.Root>
+      </Menu.Popup>
+    </Menu.Positioner>
+  </Menu.Portal>`}
+/>
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index 23f1b69728..124d575a96 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -701,6 +701,7 @@
   transform-origin: var(--transform-origin);
   max-width: min(var(--available-width), 340px);
   max-height: min(var(--available-height), 500px);
+  padding-bottom: var(--canon-space-1);
   border-radius: .375rem;
   outline: none;
   flex-direction: column;
@@ -735,10 +736,6 @@
     margin-top: var(--canon-space-1);
   }
 
-  &:last-child {
-    margin-bottom: var(--canon-space-1);
-  }
-
   &[data-highlighted] {
     background-color: var(--canon-gray-3);
   }
@@ -765,6 +762,10 @@
     color: var(--canon-fg-secondary);
   }
 
+  &:first-child {
+    margin-top: var(--canon-space-1);
+  }
+
   &[data-popup-open], &[data-highlighted] {
     background-color: var(--canon-gray-3);
 
diff --git a/packages/canon/css/menu.css b/packages/canon/css/menu.css
index 7671217198..4c9433275c 100644
--- a/packages/canon/css/menu.css
+++ b/packages/canon/css/menu.css
@@ -9,6 +9,7 @@
   transform-origin: var(--transform-origin);
   max-width: min(var(--available-width), 340px);
   max-height: min(var(--available-height), 500px);
+  padding-bottom: var(--canon-space-1);
   border-radius: .375rem;
   outline: none;
   flex-direction: column;
@@ -43,10 +44,6 @@
     margin-top: var(--canon-space-1);
   }
 
-  &:last-child {
-    margin-bottom: var(--canon-space-1);
-  }
-
   &[data-highlighted] {
     background-color: var(--canon-gray-3);
   }
@@ -73,6 +70,10 @@
     color: var(--canon-fg-secondary);
   }
 
+  &:first-child {
+    margin-top: var(--canon-space-1);
+  }
+
   &[data-popup-open], &[data-highlighted] {
     background-color: var(--canon-gray-3);
 
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index c441260aaa..084aef2855 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9925,6 +9925,7 @@
   transform-origin: var(--transform-origin);
   max-width: min(var(--available-width), 340px);
   max-height: min(var(--available-height), 500px);
+  padding-bottom: var(--canon-space-1);
   border-radius: .375rem;
   outline: none;
   flex-direction: column;
@@ -9959,10 +9960,6 @@
     margin-top: var(--canon-space-1);
   }
 
-  &:last-child {
-    margin-bottom: var(--canon-space-1);
-  }
-
   &[data-highlighted] {
     background-color: var(--canon-gray-3);
   }
@@ -9989,6 +9986,10 @@
     color: var(--canon-fg-secondary);
   }
 
+  &:first-child {
+    margin-top: var(--canon-space-1);
+  }
+
   &[data-popup-open], &[data-highlighted] {
     background-color: var(--canon-gray-3);
 
diff --git a/packages/canon/src/components/Menu/Menu.stories.tsx b/packages/canon/src/components/Menu/Menu.stories.tsx
index a41faffc19..578ce945ae 100644
--- a/packages/canon/src/components/Menu/Menu.stories.tsx
+++ b/packages/canon/src/components/Menu/Menu.stories.tsx
@@ -16,7 +16,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { Menu } from './Menu';
-import { Text, Icon, Button } from '../../index';
+import { Text, Icon, Button, Flex } from '../../index';
 import { useState } from 'react';
 
 const meta = {
@@ -131,7 +131,7 @@ export const SubmenuCombobox = () => {
   const [selectedValues, setSelectedValues] = useState<string[]>([]);
 
   return (
-    <>
+    <Flex direction="column" gap="1" align="start">
       <Text style={{ marginBottom: 16 }}>
         {selectedValues.length === 0
           ? 'Which is your favorite fruit?'
@@ -173,7 +173,7 @@ export const SubmenuCombobox = () => {
           </Menu.Positioner>
         </Menu.Portal>
       </Menu.Root>
-    </>
+    </Flex>
   );
 };
 
@@ -181,7 +181,7 @@ export const SubmenuComboboxMultiselect = () => {
   const [selectedValues, setSelectedValues] = useState<string[]>([]);
 
   return (
-    <>
+    <Flex direction="column" gap="1" align="start">
       <Text style={{ marginBottom: 16 }}>
         {selectedValues.length === 0
           ? 'Tell us what fruits you like.'
@@ -226,6 +226,6 @@ export const SubmenuComboboxMultiselect = () => {
           </Menu.Positioner>
         </Menu.Portal>
       </Menu.Root>
-    </>
+    </Flex>
   );
 };
diff --git a/packages/canon/src/components/Menu/Menu.styles.css b/packages/canon/src/components/Menu/Menu.styles.css
index 4e2b473162..07d257f57f 100644
--- a/packages/canon/src/components/Menu/Menu.styles.css
+++ b/packages/canon/src/components/Menu/Menu.styles.css
@@ -16,6 +16,7 @@
   max-height: min(var(--available-height), 500px);
   transition: transform 150ms, opacity 150ms;
   position: relative;
+  padding-bottom: var(--canon-space-1);
 
   &[data-starting-style],
   &[data-ending-style] {
@@ -44,10 +45,6 @@
     margin-top: var(--canon-space-1);
   }
 
-  &:last-child {
-    margin-bottom: var(--canon-space-1);
-  }
-
   &[data-highlighted] {
     background-color: var(--canon-gray-3);
   }
@@ -74,6 +71,10 @@
     color: var(--canon-fg-secondary);
   }
 
+  &:first-child {
+    margin-top: var(--canon-space-1);
+  }
+
   &[data-popup-open],
   &[data-highlighted] {
     background-color: var(--canon-gray-3);