diff --git a/.changeset/fix-expandableDropdown.md b/.changeset/fix-expandableDropdown.md
new file mode 100644
index 000000000..995c7f901
--- /dev/null
+++ b/.changeset/fix-expandableDropdown.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(Dropdown): Fixes from QA review of the Dropdown Expandable sub component.
diff --git a/packages/react-magma-dom/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.js.snap b/packages/react-magma-dom/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.js.snap
index ebb409b67..6be520c6a 100644
--- a/packages/react-magma-dom/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.js.snap
+++ b/packages/react-magma-dom/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.js.snap
@@ -945,7 +945,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Horizontal & center alignment 1`]
   align-items: center;
 }
 
-.emotion-22 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -963,35 +963,35 @@ exports[`ButtonGroup With dropdowns Snapshot: Horizontal & center alignment 1`]
   row-gap: 8px;
 }
 
-.emotion-22 > button:first-child,
-.emotion-22 > div:first-child {
+.emotion-20 > button:first-child,
+.emotion-20 > div:first-child {
   margin-left: 0;
 }
 
-.emotion-22 > button:last-child,
-.emotion-22 > div:last-child {
+.emotion-20 > button:last-child,
+.emotion-20 > div:last-child {
   margin-right: 0;
 }
 
-.emotion-22 > div {
+.emotion-20 > div {
   margin: 0 4px;
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
 }
 
-.emotion-22 > div button:nth-child(2) {
+.emotion-20 > div button:nth-child(2) {
   width: 40px;
 }
 
-.emotion-22 > button {
+.emotion-20 > button {
   margin: 0 4px;
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
 }
 
-.emotion-12 {
+.emotion-11 {
   display: inline-block;
   position: relative;
 }
@@ -1101,7 +1101,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Horizontal & center alignment 1`]
   padding-right: 8px;
 }
 
-.emotion-11 {
+.emotion-10 {
   background: #FFFFFF;
   border: 1px solid #D4D4D4;
   border-radius: 8px;
@@ -1136,14 +1136,10 @@ exports[`ButtonGroup With dropdowns Snapshot: Horizontal & center alignment 1`]
   outline-offset: 0;
 }
 
-.emotion-11:focus {
+.emotion-10:focus {
   outline: 2px solid #0074B7;
 }
 
-.emotion-10 {
-  padding: 4px 0;
-}
-
 .emotion-9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1289,7 +1285,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Horizontal & center alignment 1`]
   align-items: center;
 }
 
-.emotion-22 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1307,35 +1303,35 @@ exports[`ButtonGroup With dropdowns Snapshot: Horizontal & center alignment 1`]
   row-gap: 8px;
 }
 
-.emotion-22 > button:first-child,
-.emotion-22 > div:first-child {
+.emotion-20 > button:first-child,
+.emotion-20 > div:first-child {
   margin-left: 0;
 }
 
-.emotion-22 > button:last-child,
-.emotion-22 > div:last-child {
+.emotion-20 > button:last-child,
+.emotion-20 > div:last-child {
   margin-right: 0;
 }
 
-.emotion-22 > div {
+.emotion-20 > div {
   margin: 0 4px;
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
 }
 
-.emotion-22 > div button:nth-child(2) {
+.emotion-20 > div button:nth-child(2) {
   width: 40px;
 }
 
-.emotion-22 > button {
+.emotion-20 > button {
   margin: 0 4px;
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
 }
 
-.emotion-12 {
+.emotion-11 {
   display: inline-block;
   position: relative;
 }
@@ -1445,7 +1441,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Horizontal & center alignment 1`]
   padding-right: 8px;
 }
 
-.emotion-11 {
+.emotion-10 {
   background: #FFFFFF;
   border: 1px solid #D4D4D4;
   border-radius: 8px;
@@ -1480,14 +1476,10 @@ exports[`ButtonGroup With dropdowns Snapshot: Horizontal & center alignment 1`]
   outline-offset: 0;
 }
 
-.emotion-11:focus {
+.emotion-10:focus {
   outline: 2px solid #0074B7;
 }
 
-.emotion-10 {
-  padding: 4px 0;
-}
-
 .emotion-9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1523,7 +1515,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Horizontal & center alignment 1`]
 
 <div>
   <div
-    class="emotion-22"
+    class="emotion-20"
     color="primary"
     orientation="horizontal"
   >
@@ -1540,7 +1532,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Horizontal & center alignment 1`]
       </span>
     </button>
     <div
-      class="emotion-12"
+      class="emotion-11"
     >
       <button
         aria-expanded="false"
@@ -1576,14 +1568,13 @@ exports[`ButtonGroup With dropdowns Snapshot: Horizontal & center alignment 1`]
         </span>
       </button>
       <div
-        class="emotion-11"
+        class="emotion-10"
         data-testid="dropdownContent"
         tabindex="-1"
         width="auto"
       >
         <div
           aria-labelledby="2"
-          class="emotion-10"
           role="menu"
         >
           <div
@@ -1597,7 +1588,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Horizontal & center alignment 1`]
       </div>
     </div>
     <div
-      class="emotion-12"
+      class="emotion-11"
     >
       <button
         aria-expanded="false"
@@ -1633,14 +1624,13 @@ exports[`ButtonGroup With dropdowns Snapshot: Horizontal & center alignment 1`]
         </span>
       </button>
       <div
-        class="emotion-11"
+        class="emotion-10"
         data-testid="dropdownContent"
         tabindex="-1"
         width="auto"
       >
         <div
           aria-labelledby="3"
-          class="emotion-10"
           role="menu"
         >
           <div
@@ -1770,7 +1760,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
   align-items: center;
 }
 
-.emotion-22 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1791,39 +1781,39 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
   align-items: stretch;
 }
 
-.emotion-22 > button:first-child,
-.emotion-22 > div:first-child {
+.emotion-20 > button:first-child,
+.emotion-20 > div:first-child {
   margin-top: 0;
 }
 
-.emotion-22 > button:last-child,
-.emotion-22 > div:last-child {
+.emotion-20 > button:last-child,
+.emotion-20 > div:last-child {
   margin-bottom: 0;
 }
 
-.emotion-22 > div {
+.emotion-20 > div {
   margin: 0 0 8px;
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
 }
 
-.emotion-22 > div button {
+.emotion-20 > div button {
   width: 100%;
 }
 
-.emotion-22 > div button:nth-child(2) {
+.emotion-20 > div button:nth-child(2) {
   width: 40px;
 }
 
-.emotion-22 > button {
+.emotion-20 > button {
   margin: 0 0 8px;
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
 }
 
-.emotion-12 {
+.emotion-11 {
   display: inline-block;
   position: relative;
 }
@@ -1933,7 +1923,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
   padding-right: 8px;
 }
 
-.emotion-11 {
+.emotion-10 {
   background: #FFFFFF;
   border: 1px solid #D4D4D4;
   border-radius: 8px;
@@ -1968,14 +1958,10 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
   outline-offset: 0;
 }
 
-.emotion-11:focus {
+.emotion-10:focus {
   outline: 2px solid #0074B7;
 }
 
-.emotion-10 {
-  padding: 4px 0;
-}
-
 .emotion-9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -2121,7 +2107,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
   align-items: center;
 }
 
-.emotion-22 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2142,39 +2128,39 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
   align-items: stretch;
 }
 
-.emotion-22 > button:first-child,
-.emotion-22 > div:first-child {
+.emotion-20 > button:first-child,
+.emotion-20 > div:first-child {
   margin-top: 0;
 }
 
-.emotion-22 > button:last-child,
-.emotion-22 > div:last-child {
+.emotion-20 > button:last-child,
+.emotion-20 > div:last-child {
   margin-bottom: 0;
 }
 
-.emotion-22 > div {
+.emotion-20 > div {
   margin: 0 0 8px;
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
 }
 
-.emotion-22 > div button {
+.emotion-20 > div button {
   width: 100%;
 }
 
-.emotion-22 > div button:nth-child(2) {
+.emotion-20 > div button:nth-child(2) {
   width: 40px;
 }
 
-.emotion-22 > button {
+.emotion-20 > button {
   margin: 0 0 8px;
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
 }
 
-.emotion-12 {
+.emotion-11 {
   display: inline-block;
   position: relative;
 }
@@ -2284,7 +2270,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
   padding-right: 8px;
 }
 
-.emotion-11 {
+.emotion-10 {
   background: #FFFFFF;
   border: 1px solid #D4D4D4;
   border-radius: 8px;
@@ -2319,14 +2305,10 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
   outline-offset: 0;
 }
 
-.emotion-11:focus {
+.emotion-10:focus {
   outline: 2px solid #0074B7;
 }
 
-.emotion-10 {
-  padding: 4px 0;
-}
-
 .emotion-9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -2362,7 +2344,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
 
 <div>
   <div
-    class="emotion-22"
+    class="emotion-20"
     color="primary"
     orientation="vertical"
   >
@@ -2379,7 +2361,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
       </span>
     </button>
     <div
-      class="emotion-12"
+      class="emotion-11"
     >
       <button
         aria-expanded="false"
@@ -2415,14 +2397,13 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
         </span>
       </button>
       <div
-        class="emotion-11"
+        class="emotion-10"
         data-testid="dropdownContent"
         tabindex="-1"
         width="auto"
       >
         <div
           aria-labelledby="2"
-          class="emotion-10"
           role="menu"
         >
           <div
@@ -2436,7 +2417,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
       </div>
     </div>
     <div
-      class="emotion-12"
+      class="emotion-11"
     >
       <button
         aria-expanded="false"
@@ -2472,14 +2453,13 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
         </span>
       </button>
       <div
-        class="emotion-11"
+        class="emotion-10"
         data-testid="dropdownContent"
         tabindex="-1"
         width="auto"
       >
         <div
           aria-labelledby="3"
-          class="emotion-10"
           role="menu"
         >
           <div
@@ -2609,7 +2589,7 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
   align-items: center;
 }
 
-.emotion-22 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2627,81 +2607,81 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
   row-gap: 8px;
 }
 
-.emotion-22 > button:first-child,
-.emotion-22 > div:first-child {
+.emotion-20 > button:first-child,
+.emotion-20 > div:first-child {
   margin-left: 0;
 }
 
-.emotion-22 > button:last-child,
-.emotion-22 > div:last-child {
+.emotion-20 > button:last-child,
+.emotion-20 > div:last-child {
   margin-right: 0;
 }
 
-.emotion-22 > div {
+.emotion-20 > div {
   margin: 0;
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
 }
 
-.emotion-22 > div button:nth-child(2) {
+.emotion-20 > div button:nth-child(2) {
   width: 40px;
 }
 
-.emotion-22 > div:first-child:not(:only-child) button {
+.emotion-20 > div:first-child:not(:only-child) button {
   border-radius: 8px 0 0 8px;
   border-right: 0;
 }
 
-.emotion-22 > div:nth-child(2) button {
+.emotion-20 > div:nth-child(2) button {
   border-left: 1px solid #FFFFFF;
 }
 
-.emotion-22 > div:not(:first-child) button {
+.emotion-20 > div:not(:first-child) button {
   border-radius: 0;
   border-right: 1px solid #FFFFFF;
 }
 
-.emotion-22 > div:not(:first-child).emotion-22 > div:not(:last-child) button {
+.emotion-20 > div:not(:first-child).emotion-20 > div:not(:last-child) button {
   border-right: 0;
 }
 
-.emotion-22 > div:last-child:not(:only-child) button {
+.emotion-20 > div:last-child:not(:only-child) button {
   border-radius: 0 8px 8px 0;
   border-right: 1px solid #FFFFFF;
 }
 
-.emotion-22 > button {
+.emotion-20 > button {
   margin: 0;
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
 }
 
-.emotion-22 > button:first-child:not(:only-child) {
+.emotion-20 > button:first-child:not(:only-child) {
   border-radius: 8px 0 0 8px;
   border-right: 0;
 }
 
-.emotion-22 > button:nth-child(2) {
+.emotion-20 > button:nth-child(2) {
   border-left: 1px solid #FFFFFF;
 }
 
-.emotion-22 > button:not(:first-child) {
+.emotion-20 > button:not(:first-child) {
   border-radius: 0;
   border-right: 1px solid #FFFFFF;
 }
 
-.emotion-22 > button:not(:first-child).emotion-22 > button:not(:last-child) {
+.emotion-20 > button:not(:first-child).emotion-20 > button:not(:last-child) {
   border-right: 0;
 }
 
-.emotion-22 > button:last-child:not(:only-child) {
+.emotion-20 > button:last-child:not(:only-child) {
   border-radius: 0 8px 8px 0;
   border-right: 1px solid #FFFFFF;
 }
 
-.emotion-12 {
+.emotion-11 {
   display: inline-block;
   position: relative;
 }
@@ -2811,7 +2791,7 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
   padding-right: 8px;
 }
 
-.emotion-11 {
+.emotion-10 {
   background: #FFFFFF;
   border: 1px solid #D4D4D4;
   border-radius: 8px;
@@ -2846,14 +2826,10 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
   outline-offset: 0;
 }
 
-.emotion-11:focus {
+.emotion-10:focus {
   outline: 2px solid #0074B7;
 }
 
-.emotion-10 {
-  padding: 4px 0;
-}
-
 .emotion-9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -2999,7 +2975,7 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
   align-items: center;
 }
 
-.emotion-22 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3017,81 +2993,81 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
   row-gap: 8px;
 }
 
-.emotion-22 > button:first-child,
-.emotion-22 > div:first-child {
+.emotion-20 > button:first-child,
+.emotion-20 > div:first-child {
   margin-left: 0;
 }
 
-.emotion-22 > button:last-child,
-.emotion-22 > div:last-child {
+.emotion-20 > button:last-child,
+.emotion-20 > div:last-child {
   margin-right: 0;
 }
 
-.emotion-22 > div {
+.emotion-20 > div {
   margin: 0;
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
 }
 
-.emotion-22 > div button:nth-child(2) {
+.emotion-20 > div button:nth-child(2) {
   width: 40px;
 }
 
-.emotion-22 > div:first-child:not(:only-child) button {
+.emotion-20 > div:first-child:not(:only-child) button {
   border-radius: 8px 0 0 8px;
   border-right: 0;
 }
 
-.emotion-22 > div:nth-child(2) button {
+.emotion-20 > div:nth-child(2) button {
   border-left: 1px solid #FFFFFF;
 }
 
-.emotion-22 > div:not(:first-child) button {
+.emotion-20 > div:not(:first-child) button {
   border-radius: 0;
   border-right: 1px solid #FFFFFF;
 }
 
-.emotion-22 > div:not(:first-child).emotion-22 > div:not(:last-child) button {
+.emotion-20 > div:not(:first-child).emotion-20 > div:not(:last-child) button {
   border-right: 0;
 }
 
-.emotion-22 > div:last-child:not(:only-child) button {
+.emotion-20 > div:last-child:not(:only-child) button {
   border-radius: 0 8px 8px 0;
   border-right: 1px solid #FFFFFF;
 }
 
-.emotion-22 > button {
+.emotion-20 > button {
   margin: 0;
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
 }
 
-.emotion-22 > button:first-child:not(:only-child) {
+.emotion-20 > button:first-child:not(:only-child) {
   border-radius: 8px 0 0 8px;
   border-right: 0;
 }
 
-.emotion-22 > button:nth-child(2) {
+.emotion-20 > button:nth-child(2) {
   border-left: 1px solid #FFFFFF;
 }
 
-.emotion-22 > button:not(:first-child) {
+.emotion-20 > button:not(:first-child) {
   border-radius: 0;
   border-right: 1px solid #FFFFFF;
 }
 
-.emotion-22 > button:not(:first-child).emotion-22 > button:not(:last-child) {
+.emotion-20 > button:not(:first-child).emotion-20 > button:not(:last-child) {
   border-right: 0;
 }
 
-.emotion-22 > button:last-child:not(:only-child) {
+.emotion-20 > button:last-child:not(:only-child) {
   border-radius: 0 8px 8px 0;
   border-right: 1px solid #FFFFFF;
 }
 
-.emotion-12 {
+.emotion-11 {
   display: inline-block;
   position: relative;
 }
@@ -3201,7 +3177,7 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
   padding-right: 8px;
 }
 
-.emotion-11 {
+.emotion-10 {
   background: #FFFFFF;
   border: 1px solid #D4D4D4;
   border-radius: 8px;
@@ -3236,14 +3212,10 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
   outline-offset: 0;
 }
 
-.emotion-11:focus {
+.emotion-10:focus {
   outline: 2px solid #0074B7;
 }
 
-.emotion-10 {
-  padding: 4px 0;
-}
-
 .emotion-9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -3279,7 +3251,7 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
 
 <div>
   <div
-    class="emotion-22"
+    class="emotion-20"
     color="primary"
     orientation="horizontal"
   >
@@ -3296,7 +3268,7 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
       </span>
     </button>
     <div
-      class="emotion-12"
+      class="emotion-11"
     >
       <button
         aria-expanded="false"
@@ -3332,14 +3304,13 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
         </span>
       </button>
       <div
-        class="emotion-11"
+        class="emotion-10"
         data-testid="dropdownContent"
         tabindex="-1"
         width="auto"
       >
         <div
           aria-labelledby="2"
-          class="emotion-10"
           role="menu"
         >
           <div
@@ -3353,7 +3324,7 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
       </div>
     </div>
     <div
-      class="emotion-12"
+      class="emotion-11"
     >
       <button
         aria-expanded="false"
@@ -3389,14 +3360,13 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
         </span>
       </button>
       <div
-        class="emotion-11"
+        class="emotion-10"
         data-testid="dropdownContent"
         tabindex="-1"
         width="auto"
       >
         <div
           aria-labelledby="3"
-          class="emotion-10"
           role="menu"
         >
           <div
diff --git a/packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx b/packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx
index a4d90dd53..e79fb978c 100644
--- a/packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx
+++ b/packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx
@@ -501,7 +501,7 @@ export const ExpandableItemsWithIconsAndConsoleWarning = args => {
     <Dropdown {...args} width={220}>
       <DropdownButton>Expandable Items Dropdown</DropdownButton>
       <DropdownContent>
-        <DropdownExpandableMenuGroup>
+        <DropdownExpandableMenuGroup isMulti={false} defaultIndex={1}>
           <DropdownExpandableMenuItem>
             <DropdownExpandableMenuButton>Pasta</DropdownExpandableMenuButton>
             <DropdownExpandableMenuPanel>
diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownContent.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownContent.tsx
index d3e4df9a4..067f9c7f3 100644
--- a/packages/react-magma-dom/src/components/Dropdown/DropdownContent.tsx
+++ b/packages/react-magma-dom/src/components/Dropdown/DropdownContent.tsx
@@ -102,10 +102,6 @@ const StyledCard = styled(Card)<{
    `}
 `;
 
-const StyledDiv = styled.div`
-  padding: ${props => props.theme.spaceScale.spacing02} 0;
-`;
-
 export const DropdownContent = React.forwardRef<
   HTMLDivElement,
   DropdownContentProps
@@ -153,13 +149,12 @@ export const DropdownContent = React.forwardRef<
       theme={theme}
       width={context.width}
     >
-      <StyledDiv
+      <div
         aria-labelledby={context.dropdownButtonId.current}
         role={hasItemChildren ? 'menu' : null}
-        theme={theme}
       >
         {children}
-      </StyledDiv>
+      </div>
     </StyledCard>
   );
 });
diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuButton.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuButton.tsx
index 5aacb6455..b22a7b481 100644
--- a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuButton.tsx
+++ b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuButton.tsx
@@ -7,16 +7,15 @@ import { ThemeContext } from '../../theme/ThemeContext';
 import { DropdownContext } from './Dropdown';
 import { DropdownExpandableMenuGroupContext } from './DropdownExpandableMenuGroup';
 import { useForkedRef } from '../../utils';
+import { DropdownExpandableMenuItemContext } from './DropdownExpandableMenuItem';
 
 export interface DropdownExpandableMenuButtonProps
   extends AccordionButtonProps {
-  disabled?: boolean;
   icon?: React.ReactElement<IconProps>;
   testId?: string;
 }
 
 const StyledAccordionButton = styled(AccordionButton)<{
-  disabled?: boolean;
   expandableMenuButtonHasIcon?: boolean;
   icon?: React.ReactElement<IconProps>;
 }>`
@@ -28,6 +27,9 @@ const StyledAccordionButton = styled(AccordionButton)<{
       : `${props.theme.spaceScale.spacing03} ${props.theme.spaceScale.spacing05}`};
   margin: 0;
   border-top: 0;
+  &:focus {
+    outline-offset: -2px;
+  }
   &:hover,
   &:focus {
     background: ${menuBackground};
@@ -45,7 +47,7 @@ export const DropdownExpandableMenuButton = React.forwardRef<
   HTMLDivElement,
   DropdownExpandableMenuButtonProps
 >((props, forwardedRef) => {
-  const { children, disabled, customOnKeyDown, icon, testId, ...other } = props;
+  const { children, customOnKeyDown, icon, testId, ...other } = props;
 
   const theme = React.useContext(ThemeContext);
   const context = React.useContext(DropdownContext);
@@ -53,11 +55,15 @@ export const DropdownExpandableMenuButton = React.forwardRef<
     DropdownExpandableMenuGroupContext
   );
 
+  const expandableMenuItemContext = React.useContext(
+    DropdownExpandableMenuItemContext
+  );
+
   const ownRef = React.useRef<HTMLDivElement>();
   const ref = useForkedRef(forwardedRef, ownRef);
 
   React.useEffect(() => {
-    if (!disabled) {
+    if (!expandableMenuItemContext.disabled) {
       context.registerDropdownMenuItem(context.itemRefArray, ownRef);
     }
   }, []);
@@ -72,7 +78,6 @@ export const DropdownExpandableMenuButton = React.forwardRef<
   return (
     <StyledAccordionButton
       {...other}
-      disabled={disabled}
       ref={ref}
       customOnKeyDown={handleCustomOnKeyDown}
       icon={icon}
diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuGroup.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuGroup.tsx
index 0f91cc79a..178cc6d75 100644
--- a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuGroup.tsx
+++ b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuGroup.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import styled from '../../theme/styled';
-import { Accordion, AccordionProps } from '../Accordion';
+import { Accordion, AccordionIconPosition, AccordionProps } from '../Accordion';
 import { DropdownContext } from './Dropdown';
 
 const StyledAccordion = styled(Accordion)`
   border: none;
+  padding: 0;
 `;
 
 export interface DropdownExpandableMenuGroupContextInterface {
@@ -48,6 +49,7 @@ export const DropdownExpandableMenuGroup = React.forwardRef<
     >
       <StyledAccordion
         {...other}
+        iconPosition={AccordionIconPosition.right}
         isInverse={context.isInverse}
         ref={ref}
         role="group"
diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuItem.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuItem.tsx
index 47dce0c8b..5075039da 100644
--- a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuItem.tsx
+++ b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuItem.tsx
@@ -1,52 +1,36 @@
 import * as React from 'react';
-import { IconProps } from 'react-magma-icons';
 import { AccordionItem, AccordionItemProps } from '../Accordion';
-import {
-  DropdownExpandableMenuButton,
-  DropdownExpandableMenuButtonProps,
-} from './DropdownExpandableMenuButton';
 export interface DropdownExpandableMenuItemProps extends AccordionItemProps {
   /**
    * If true, item will be disabled; it will appear dimmed and onClick event (or any other events) will not fire
    * @default false
    */
   disabled?: boolean;
-  /**
-   * Leading icon for the menu item
-   */
-  icon?: React.ReactElement<IconProps>;
   /**
    * @internal
    */
   testId?: string;
 }
 
+export interface DropdownExpandableMenuItemContextInterface {
+  disabled?: boolean;
+}
+
+export const DropdownExpandableMenuItemContext =
+  React.createContext<DropdownExpandableMenuItemContextInterface>({});
+
 export const DropdownExpandableMenuItem = React.forwardRef<
   HTMLDivElement,
   DropdownExpandableMenuItemProps
 >((props, ref) => {
   const { children, disabled, testId, ...other } = props;
 
-  const dropdownExpandableMenuItemChildren = React.Children.map(
-    children,
-    child => {
-      const item = child as React.ReactElement<
-        React.PropsWithChildren<DropdownExpandableMenuButtonProps>
-      >;
-
-      if (item.type === DropdownExpandableMenuButton) {
-        if (disabled) {
-          return React.cloneElement(item, { disabled: true });
-        }
-      }
-      return child;
-    }
-  );
-
   return (
-    <AccordionItem {...other} isDisabled={disabled} ref={ref} testId={testId}>
-      {dropdownExpandableMenuItemChildren}
-    </AccordionItem>
+    <DropdownExpandableMenuItemContext.Provider value={{ disabled }}>
+      <AccordionItem {...other} isDisabled={disabled} ref={ref} testId={testId}>
+        {children}
+      </AccordionItem>
+    </DropdownExpandableMenuItemContext.Provider>
   );
 });
 
diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuListItem.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuListItem.tsx
index 7e057c5d8..29314d640 100644
--- a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuListItem.tsx
+++ b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuListItem.tsx
@@ -5,9 +5,10 @@ import { DropdownContext } from './Dropdown';
 import { Omit, useForkedRef } from '../../utils';
 import { DropdownExpandableMenuGroupContext } from './DropdownExpandableMenuGroup';
 import { DropdownMenuItem, DropdownMenuItemProps } from './DropdownMenuItem';
+import { DropdownExpandableMenuItemContext } from './DropdownExpandableMenuItem';
 
 export interface DropdownExpandableMenuListItemProps
-  extends Omit<DropdownMenuItemProps, 'icon'> {
+  extends Omit<DropdownMenuItemProps, 'icon' | 'disabled'> {
   testId?: string;
 }
 
@@ -31,7 +32,7 @@ export const DropdownExpandableMenuListItem = React.forwardRef<
   HTMLDivElement,
   DropdownExpandableMenuListItemProps
 >((props, forwardedRef) => {
-  const { children, disabled, ...other } = props;
+  const { children, ...other } = props;
 
   const ownRef = React.useRef<HTMLDivElement>();
   const theme = React.useContext(ThemeContext);
@@ -39,10 +40,14 @@ export const DropdownExpandableMenuListItem = React.forwardRef<
 
   const menuGroupContext = React.useContext(DropdownExpandableMenuGroupContext);
 
+  const expandableMenuItemContext = React.useContext(
+    DropdownExpandableMenuItemContext
+  );
+
   const ref = useForkedRef(forwardedRef, ownRef);
 
   React.useEffect(() => {
-    if (!disabled)
+    if (!expandableMenuItemContext.disabled)
       context.registerDropdownMenuItem(context.itemRefArray, ownRef);
   }, []);
 
@@ -51,7 +56,7 @@ export const DropdownExpandableMenuListItem = React.forwardRef<
       {...other}
       expandableMenuButtonHasIcon={menuGroupContext.expandableMenuButtonHasIcon}
       isExpandablePanel={menuGroupContext.isExpandablePanel}
-      ref={disabled ? null : ref}
+      ref={expandableMenuItemContext.disabled ? null : ref}
       theme={theme}
     >
       {children}
diff --git a/website/react-magma-docs/src/pages/api/dropdown.mdx b/website/react-magma-docs/src/pages/api/dropdown.mdx
index 3076c50dc..51ab755cf 100644
--- a/website/react-magma-docs/src/pages/api/dropdown.mdx
+++ b/website/react-magma-docs/src/pages/api/dropdown.mdx
@@ -371,6 +371,7 @@ import {
   Dropdown,
   DropdownButton,
   DropdownContent,
+  DropdownDivider,
   DropdownExpandableMenuGroup,
   DropdownExpandableMenuItem,
   DropdownExpandableMenuButton,
@@ -427,6 +428,77 @@ export function Example() {
 }
 ```
 
+### Expandable Menu with item auto expanded
+
+By default, the `isMulti` prop is true on `DropdownExpandableMenuGroup`, which means that the expandable dropdown will allow multiple items to be expanded at once. If you wish to limit the number of items open at once, you can set the `isMulti` prop to false.
+
+The `defaultIndex` prop on `DropdownExpandableMenuGroup` uses an array of zero based indices to enable expandable groups to be automatically opened.
+
+When the `isMulti` prop is false, the `defaultIndex` prop will take a single number, instead of an array.
+
+```tsx
+import React from 'react';
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownContent,
+  DropdownDivider,
+  DropdownExpandableMenuGroup,
+  DropdownExpandableMenuItem,
+  DropdownExpandableMenuButton,
+  DropdownExpandableMenuPanel,
+  DropdownExpandableMenuListItem,
+} from 'react-magma-dom';
+
+import {
+  RestaurantMenuIcon,
+  LunchDiningIcon,
+  LocalPizzaIcon,
+} from 'react-magma-icons';
+
+export function Example() {
+  return (
+    <Dropdown width={240}>
+      <DropdownButton>Expandable Items Dropdown</DropdownButton>
+      <DropdownContent>
+        <DropdownExpandableMenuGroup defaultIndex={[0]}>
+          <DropdownExpandableMenuItem>
+            <DropdownExpandableMenuButton icon={<RestaurantMenuIcon />}>
+              Pasta
+            </DropdownExpandableMenuButton>
+            <DropdownExpandableMenuPanel>
+              <DropdownExpandableMenuListItem>
+                Fresh
+              </DropdownExpandableMenuListItem>
+              <DropdownExpandableMenuListItem>
+                Processed
+              </DropdownExpandableMenuListItem>
+            </DropdownExpandableMenuPanel>
+          </DropdownExpandableMenuItem>
+          <DropdownExpandableMenuItem>
+            <DropdownExpandableMenuButton icon={<LunchDiningIcon />}>
+              Prosciutto
+            </DropdownExpandableMenuButton>
+            <DropdownExpandableMenuPanel>
+              <DropdownExpandableMenuListItem>
+                Domestic
+              </DropdownExpandableMenuListItem>
+              <DropdownExpandableMenuListItem>
+                Speck
+              </DropdownExpandableMenuListItem>
+            </DropdownExpandableMenuPanel>
+          </DropdownExpandableMenuItem>
+        </DropdownExpandableMenuGroup>
+        <DropdownDivider />
+        <DropdownExpandableMenuListItem icon={<LocalPizzaIcon />}>
+          Pizza
+        </DropdownExpandableMenuListItem>
+      </DropdownContent>
+    </Dropdown>
+  );
+}
+```
+
 ### Text only Expandable Menu Item
 
 ```tsx
@@ -435,6 +507,7 @@ import {
   Dropdown,
   DropdownButton,
   DropdownContent,
+  DropdownDivider,
   DropdownExpandableMenuGroup,
   DropdownExpandableMenuItem,
   DropdownExpandableMenuButton,