diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap
index bc1d8d33..e72980be 100644
--- a/spec/__snapshots__/Storyshots.test.js.snap
+++ b/spec/__snapshots__/Storyshots.test.js.snap
@@ -5927,6 +5927,101 @@ Array [
 ]
 `;
 
+exports[`Storyshots Components/Drawer Additional Primary Actions 1`] = `
+Array [
+  <button
+    className="Button btn btn-primary"
+    disabled={false}
+    onClick={[Function]}
+    type="button"
+  >
+    Open
+  </button>,
+  <div
+    className="DrawerBackgroundOverlay"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="presentation"
+  />,
+  <div
+    className="Drawer Drawer--right Drawer--sm Drawer--behind-nav"
+  >
+    <div
+      className="Drawer__header Drawer__header--bordered"
+    >
+      <div
+        className="Drawer__title"
+      >
+        Title goes here
+      </div>
+      <button
+        aria-label="Close"
+        className="Drawer__header-action"
+        onClick={[Function]}
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          className="svg-inline--fa fa-xmark "
+          data-icon="xmark"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          style={Object {}}
+          viewBox="0 0 384 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+            fill="currentColor"
+            style={Object {}}
+          />
+        </svg>
+      </button>
+    </div>
+    <div
+      className="Drawer__body"
+    >
+      <p>
+        Proin elementum vitae nibh nec tincidunt. Donec vel placerat mi, vitae malesuada odio. Sed varius libero sed erat faucibus ultrices. Suspendisse potenti. Mauris sit amet sollicitudin urna. Donec porttitor, est quis aliquet condimentum, nisi felis porta odio, eu luctus dui ex id nisi. Curabitur ultrices enim in dolor laoreet porta. Proin vehicula at nisl a maximus. Sed lorem enim, elementum in arcu eu, lacinia consequat arcu. Pellentesque non nibh viverra, imperdiet purus at, finibus turpis. Sed mattis erat a risus dignissim, eu ultrices est rhoncus. Fusce nec feugiat tortor. Quisque tincidunt nulla urna, ut egestas massa congue a. Quisque metus felis, auctor sit amet posuere eu, aliquam blandit libero. Mauris sodales, velit sit amet egestas aliquet, ipsum arcu porta lacus, vitae mattis felis elit in metus. Nulla ligula ligula, laoreet in dictum sit amet, pretium ac est.
+      </p>
+    </div>
+    <div
+      className="DrawerFooter"
+    >
+      <div />
+      <div
+        className="DrawerFooter__actions"
+      >
+        <button
+          aria-disabled={false}
+          className="Button btn btn-transparent"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          Cancel
+        </button>
+        <div
+          className="Dropdown dropdown"
+        >
+          <button
+            aria-expanded={false}
+            aria-label="dropdown-toggle"
+            className="DropdownToggle dropdown-toggle btn btn-primary"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            Send
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`Storyshots Components/Drawer Default 1`] = `
 Array [
   <button
@@ -24816,12 +24911,12 @@ Array [
       role="presentation"
     >
       <button
-        aria-controls="react-aria-:r8:-tabpane-one"
+        aria-controls="react-aria-:r9:-tabpane-one"
         aria-selected={true}
         className="nav-link active"
         data-rr-ui-event-key="one"
         disabled={false}
-        id="react-aria-:r8:-tab-one"
+        id="react-aria-:r9:-tab-one"
         onClick={[Function]}
         role="tab"
         type="button"
@@ -24834,12 +24929,12 @@ Array [
       role="presentation"
     >
       <button
-        aria-controls="react-aria-:r8:-tabpane-two"
+        aria-controls="react-aria-:r9:-tabpane-two"
         aria-selected={false}
         className="nav-link"
         data-rr-ui-event-key="two"
         disabled={false}
-        id="react-aria-:r8:-tab-two"
+        id="react-aria-:r9:-tab-two"
         onClick={[Function]}
         role="tab"
         tabIndex={-1}
@@ -24853,12 +24948,12 @@ Array [
       role="presentation"
     >
       <button
-        aria-controls="react-aria-:r8:-tabpane-three"
+        aria-controls="react-aria-:r9:-tabpane-three"
         aria-selected={false}
         className="nav-link"
         data-rr-ui-event-key="three"
         disabled={false}
-        id="react-aria-:r8:-tab-three"
+        id="react-aria-:r9:-tab-three"
         onClick={[Function]}
         role="tab"
         tabIndex={-1}
@@ -24872,13 +24967,13 @@ Array [
       role="presentation"
     >
       <button
-        aria-controls="react-aria-:r8:-tabpane-four"
+        aria-controls="react-aria-:r9:-tabpane-four"
         aria-disabled={true}
         aria-selected={false}
         className="nav-link disabled"
         data-rr-ui-event-key="four"
         disabled={true}
-        id="react-aria-:r8:-tab-four"
+        id="react-aria-:r9:-tab-four"
         onClick={[Function]}
         role="tab"
         tabIndex={-1}
@@ -24892,9 +24987,9 @@ Array [
     className="tab-content"
   >
     <div
-      aria-labelledby="react-aria-:r8:-tab-one"
+      aria-labelledby="react-aria-:r9:-tab-one"
       className="fade tab-pane active show"
-      id="react-aria-:r8:-tabpane-one"
+      id="react-aria-:r9:-tabpane-one"
       role="tabpanel"
     >
       <div
@@ -24908,9 +25003,9 @@ Array [
       </div>
     </div>
     <div
-      aria-labelledby="react-aria-:r8:-tab-two"
+      aria-labelledby="react-aria-:r9:-tab-two"
       className="fade tab-pane"
-      id="react-aria-:r8:-tabpane-two"
+      id="react-aria-:r9:-tabpane-two"
       role="tabpanel"
     >
       <div
@@ -24924,9 +25019,9 @@ Array [
       </div>
     </div>
     <div
-      aria-labelledby="react-aria-:r8:-tab-three"
+      aria-labelledby="react-aria-:r9:-tab-three"
       className="fade tab-pane"
-      id="react-aria-:r8:-tabpane-three"
+      id="react-aria-:r9:-tabpane-three"
       role="tabpanel"
     >
       <div
@@ -24940,9 +25035,9 @@ Array [
       </div>
     </div>
     <div
-      aria-labelledby="react-aria-:r8:-tab-four"
+      aria-labelledby="react-aria-:r9:-tab-four"
       className="fade tab-pane"
-      id="react-aria-:r8:-tabpane-four"
+      id="react-aria-:r9:-tabpane-four"
       role="tabpanel"
     >
       <div
diff --git a/src/Drawer/Drawer.mdx b/src/Drawer/Drawer.mdx
index 57a47cf1..93dc5f97 100644
--- a/src/Drawer/Drawer.mdx
+++ b/src/Drawer/Drawer.mdx
@@ -67,6 +67,10 @@ you want the drawer to be the full width of the viewport but you want to disable
 
 If additional components are required to be included, pass them as children to the `DrawerFooter`. This example also doesn't have a title or a border on the header, and the background overlay is turned off to allow interaction with outside elements.
 
+### Additional Primary Actions
+
+If additional primary actions are required, you can utilize the `primaryAdditionalActions` prop. This will render the primary action as a dropdown toggle.
+
 ### Empty
 
 While using the corresponding child components is recommended, Drawer is fully functional on its own and be closed by clicking outside of it or pressing the escape key. This is intended as an escape hatch to allow fully custom contents. In fully custom cases it is encouraged to include a close button. As the child components all work independent of each other it is also possible to use the header and body, but not the footer, for instance. This is useful for drawers which only include information and not an action.
diff --git a/src/Drawer/Drawer.stories.jsx b/src/Drawer/Drawer.stories.jsx
index 12e2111b..3d437e25 100644
--- a/src/Drawer/Drawer.stories.jsx
+++ b/src/Drawer/Drawer.stories.jsx
@@ -8,7 +8,7 @@ import Button from 'src/Button';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
-  faEnvelope, faChevronLeft, faChevronRight, faTrash,
+  faEnvelope, faChevronLeft, faChevronRight, faTrash, faUpRightFromSquare,
 } from '@fortawesome/pro-solid-svg-icons';
 
 import mdx from './Drawer.mdx';
@@ -295,6 +295,62 @@ export const AdditionalActions = () => {
   );
 };
 
+export const AdditionalPrimaryActions = () => {
+  const [isVisible, setVisible] = useState(false);
+
+  const toggleVisible = () => setVisible(!isVisible);
+
+  return (
+    <>
+      <Button onClick={toggleVisible}>Open</Button>
+      <Drawer
+        behindNav
+        defaultExpanded={false}
+        expandable={false}
+        hasBackgroundOverlay
+        orientation="right"
+        size="sm"
+        visible={isVisible}
+        onRequestClose={toggleVisible}
+      >
+        <DrawerHeader
+          bordered
+          title="Title goes here"
+          onRequestClose={toggleVisible}
+        />
+        <DrawerBody>
+          <p>
+            Proin elementum vitae nibh nec tincidunt. Donec vel placerat mi,
+            vitae malesuada odio. Sed varius libero sed erat faucibus ultrices.
+            Suspendisse potenti. Mauris sit amet sollicitudin urna. Donec
+            porttitor, est quis aliquet condimentum, nisi felis porta odio, eu
+            luctus dui ex id nisi. Curabitur ultrices enim in dolor laoreet
+            porta. Proin vehicula at nisl a maximus. Sed lorem enim, elementum in
+            arcu eu, lacinia consequat arcu. Pellentesque non nibh viverra,
+            imperdiet purus at, finibus turpis. Sed mattis erat a risus
+            dignissim, eu ultrices est rhoncus. Fusce nec feugiat tortor. Quisque
+            tincidunt nulla urna, ut egestas massa congue a. Quisque metus felis,
+            auctor sit amet posuere eu, aliquam blandit libero. Mauris sodales,
+            velit sit amet egestas aliquet, ipsum arcu porta lacus, vitae mattis
+            felis elit in metus. Nulla ligula ligula, laoreet in dictum sit amet,
+            pretium ac est.
+          </p>
+        </DrawerBody>
+        <DrawerFooter
+          additionalPrimaryActions={[
+            { text: 'Save', onClick: () => null },
+            { text: 'Save and preview', onClick: () => null, trailingIcon: faUpRightFromSquare },
+          ]}
+          primaryActionIcon={faEnvelope}
+          primaryActionText="Send"
+          secondaryActionText="Cancel"
+          onSecondaryAction={toggleVisible}
+        />
+      </Drawer>
+    </>
+  );
+};
+
 export const Empty = () => {
   const [isVisible, setVisible] = useState(false);
 
diff --git a/src/Drawer/DrawerFooter.jsx b/src/Drawer/DrawerFooter.jsx
index fe4cd6cf..4d8bfc46 100644
--- a/src/Drawer/DrawerFooter.jsx
+++ b/src/Drawer/DrawerFooter.jsx
@@ -2,11 +2,15 @@ import React from 'react';
 import * as propTypes from 'prop-types';
 
 import Button from 'src/Button';
+import {
+ Dropdown, DropdownToggle, DropdownItem, DropdownMenu,
+} from 'src/Dropdown';
 
 import './DrawerFooter.scss';
 
 const DrawerFooter = ({
   children,
+  additionalPrimaryActions,
   isPrimaryActionLoading,
   isSecondaryActionLoading,
   primaryActionDisabled,
@@ -19,13 +23,16 @@ const DrawerFooter = ({
   secondaryActionText,
   onPrimaryAction,
   onSecondaryAction,
-}) => (
-  <div className="DrawerFooter">
-    <div>
-      {children}
-    </div>
-    <div className="DrawerFooter__actions">
-      {onSecondaryAction && (
+}) => {
+  const isDropdownToggle = !!additionalPrimaryActions.length;
+
+  return (
+    <div className="DrawerFooter">
+      <div>
+        {children}
+      </div>
+      <div className="DrawerFooter__actions">
+        {onSecondaryAction && (
         <Button
           disabled={secondaryActionDisabled}
           isLoading={isSecondaryActionLoading}
@@ -37,24 +44,52 @@ const DrawerFooter = ({
           {secondaryActionText}
         </Button>
       )}
-      {onPrimaryAction && (
-        <Button
-          disabled={primaryActionDisabled}
-          isLoading={isPrimaryActionLoading}
-          leadingIcon={primaryActionIcon}
-          loadingText={primaryActionLoadingText}
-          type="button"
-          variant={primaryActionVariant}
-          onClick={onPrimaryAction}
-        >
-          {primaryActionText}
-        </Button>
-      )}
+        {!isDropdownToggle && onPrimaryAction && (
+          <Button
+            disabled={primaryActionDisabled}
+            isLoading={isPrimaryActionLoading}
+            leadingIcon={primaryActionIcon}
+            loadingText={primaryActionLoadingText}
+            type="button"
+            variant={primaryActionVariant}
+            onClick={onPrimaryAction}
+          >
+            {primaryActionText}
+          </Button>
+        )}
+        {isDropdownToggle && (
+          <Dropdown>
+            <DropdownToggle>{primaryActionText}</DropdownToggle>
+            <DropdownMenu>
+              {additionalPrimaryActions.map((action) => (
+                <DropdownItem
+                  disabled={action.disabled}
+                  key={action.text}
+                  leadingIcon={action.leadingIcon}
+                  trailingIcon={action.trailingIcon}
+                  onClick={action.onClick}
+                >
+                  {action.text}
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </Dropdown>
+        )}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 DrawerFooter.propTypes = {
+  additionalPrimaryActions: propTypes.arrayOf(
+    propTypes.shape({
+      disabled: propTypes.bool,
+      leadingIcon: propTypes.object,
+      text: propTypes.string.isRequired,
+      trailingIcon: propTypes.object,
+      onClick: propTypes.func.isRequired,
+    }),
+  ),
   children: propTypes.node,
   isPrimaryActionLoading: propTypes.bool,
   isSecondaryActionLoading: propTypes.bool,
@@ -72,6 +107,7 @@ DrawerFooter.propTypes = {
 
 DrawerFooter.defaultProps = {
   children: undefined,
+  additionalPrimaryActions: [],
   isPrimaryActionLoading: false,
   isSecondaryActionLoading: false,
   primaryActionDisabled: false,
diff --git a/src/Drawer/DrawerFooter.scss b/src/Drawer/DrawerFooter.scss
index aecf318d..639bedf5 100644
--- a/src/Drawer/DrawerFooter.scss
+++ b/src/Drawer/DrawerFooter.scss
@@ -8,6 +8,7 @@
   padding: $synth-spacing-4;
 
   &__actions {
+    display: flex;
     > :not(:first-child) {
       margin-left: $synth-spacing-1;
     }
diff --git a/src/Dropdown/Dropdown.stories.jsx b/src/Dropdown/Dropdown.stories.jsx
index e85957f0..68d66551 100644
--- a/src/Dropdown/Dropdown.stories.jsx
+++ b/src/Dropdown/Dropdown.stories.jsx
@@ -90,7 +90,7 @@ export const IconSwap = () => (
       </DropdownToggle>
       <DropdownMenu>
         <DropdownItem href="#" leadingIcon={faTag}>Add label</DropdownItem>
-        <DropdownItem href="#" leadingIcon={faEnvelope}>Compose email</DropdownItem>
+        <DropdownItem href="#" trailingIcon={faEnvelope}>Compose email</DropdownItem>
       </DropdownMenu>
     </Dropdown>
   </>
diff --git a/src/Dropdown/DropdownItem.jsx b/src/Dropdown/DropdownItem.jsx
index 59e95ece..9c7e81b7 100644
--- a/src/Dropdown/DropdownItem.jsx
+++ b/src/Dropdown/DropdownItem.jsx
@@ -17,6 +17,7 @@ const DropdownItem = ({
   eventKey,
   href,
   leadingIcon,
+  trailingIcon,
   onClick,
   bsPrefix,
   ...props
@@ -36,8 +37,9 @@ const DropdownItem = ({
     onClick={onClick}
     {...props}
   >
-    { leadingIcon && <FontAwesomeIcon className={classNames(styles.DropdownItemIcon, 'icon-left', 'fa-fw')} icon={leadingIcon} /> }
+    { leadingIcon && <FontAwesomeIcon className={classNames(styles.DropdownItemLeadingIcon, 'icon-left', 'fa-fw')} icon={leadingIcon} /> }
     { children }
+    { trailingIcon && <FontAwesomeIcon className={classNames(styles.DropdownItemTrailingIcon, 'icon-right', 'fa-fw')} icon={trailingIcon} /> }
   </RBDropdown.Item>
   );
 
@@ -69,6 +71,7 @@ DropdownItem.propTypes = {
    */
   href: PropTypes.string,
   leadingIcon: PropTypes.object,
+  trailingIcon: PropTypes.object,
   /**
     Callback fired when the menu item is clicked.
    */
@@ -84,6 +87,7 @@ DropdownItem.defaultProps = {
   eventKey: undefined,
   href: undefined,
   leadingIcon: undefined,
+  trailingIcon: undefined,
   onClick: undefined,
 };
 
diff --git a/src/Dropdown/DropdownItem.module.scss b/src/Dropdown/DropdownItem.module.scss
index c9701305..f98fd450 100644
--- a/src/Dropdown/DropdownItem.module.scss
+++ b/src/Dropdown/DropdownItem.module.scss
@@ -15,6 +15,10 @@
   }
 }
 
-.DropdownItemIcon {
+.DropdownItemLeadingIcon {
   margin-right: $synth-spacing-2;
 }
+
+.DropdownItemTrailingIcon {
+  margin-left: $synth-spacing-2;
+}