diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap
index 91ef7d9a3..a4b199350 100644
--- a/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/__tests__/__snapshots__/storyshots.test.js.snap
@@ -6060,6 +6060,46 @@ exports[`Storyshots Components/DropdownMenu Basic 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/DropdownMenu With Custom Toggle 1`] = `
+<div
+  className="dropdown"
+>
+  <button
+    aria-expanded={false}
+    className="dropdown btn btn-primary"
+    data-testid="dropdown-lesson"
+    disabled={false}
+    id="dropdown-lesson"
+    onClick={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="octicon octicon-kebab-horizontal"
+      fill="currentColor"
+      focusable="false"
+      height={24}
+      role="img"
+      style={
+        Object {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 24 24"
+      width={24}
+    >
+      <path
+        d="M6 12a2 2 0 11-4 0 2 2 0 014 0zm8 0a2 2 0 11-4 0 2 2 0 014 0zm6 2a2 2 0 100-4 2 2 0 000 4z"
+        fillRule="evenodd"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
 exports[`Storyshots Components/DropdownMenu With Separators 1`] = `
 <div
   className="dropdown"
diff --git a/components/DropdownMenu.test.js b/components/DropdownMenu.test.js
index 97c4f130e..b7ef336f8 100644
--- a/components/DropdownMenu.test.js
+++ b/components/DropdownMenu.test.js
@@ -14,7 +14,31 @@ const dropdownMenuItems = [
 
 let testBtnOnClick = ''
 
-describe('MdInput Component', () => {
+describe('DropdownMenu Component', () => {
+  test('Should render custom toggle', () => {
+    const textToTest = 'custom toggle'
+
+    const { queryByText } = render(
+      <DropdownMenu
+        items={dropdownMenuItems}
+        customToggle={{ Component: () => <span>{textToTest}</span> }}
+      />
+    )
+
+    expect(queryByText(textToTest)).toBeInTheDocument()
+  })
+
+  test('Should render custom toggle styles', () => {
+    const { queryByText } = render(
+      <DropdownMenu
+        items={dropdownMenuItems}
+        customToggle={{ style: 'customClass' }}
+      />
+    )
+
+    expect(queryByText('None').classList.contains('customClass')).toBeTruthy()
+  })
+
   test('Should render divider when an item is null', () => {
     const { container, queryByRole } = render(
       <DropdownMenu title="Admin" items={dropdownMenuItems} />
diff --git a/components/DropdownMenu.tsx b/components/DropdownMenu.tsx
index 85a9dd0fa..828aed5d3 100644
--- a/components/DropdownMenu.tsx
+++ b/components/DropdownMenu.tsx
@@ -19,6 +19,10 @@ type DropDownMenuProps = {
   //changes the underlying component CSS base class name
   //https://react-bootstrap.github.io/components/dropdowns/#api
   bsPrefix?: string
+  customToggle?: {
+    Component?: () => JSX.Element
+    style?: string
+  }
 }
 
 const ChevronRight = () => <ChevronRightIcon size={17} />
@@ -26,6 +30,7 @@ const ChevronRight = () => <ChevronRightIcon size={17} />
 export const DropdownMenu: React.FC<DropDownMenuProps> = ({
   items,
   title,
+  customToggle,
   bsPrefix = ''
 }) => {
   const [activeItem, setActiveItem] = useState({ title })
@@ -33,12 +38,18 @@ export const DropdownMenu: React.FC<DropDownMenuProps> = ({
   return (
     <Dropdown bsPrefix={bsPrefix}>
       <Dropdown.Toggle
-        bsPrefix={styles.dropdown}
+        bsPrefix={customToggle?.style ? customToggle.style : styles.dropdown}
         id="dropdown-lesson"
         data-testid="dropdown-lesson"
       >
-        {activeItem.title || 'None'}
-        <ChevronRight />
+        {customToggle?.Component ? (
+          <customToggle.Component />
+        ) : (
+          <>
+            {activeItem.title || 'None'}
+            <ChevronRight />
+          </>
+        )}
       </Dropdown.Toggle>
 
       <Dropdown.Menu className={styles.dropdown__menu}>
diff --git a/components/__snapshots__/DropdownMenu.test.js.snap b/components/__snapshots__/DropdownMenu.test.js.snap
index 4d79c00c0..f05c845ef 100644
--- a/components/__snapshots__/DropdownMenu.test.js.snap
+++ b/components/__snapshots__/DropdownMenu.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MdInput Component Should change value of testBtnOnClick upon click 1`] = `
+exports[`DropdownMenu Component Should change value of testBtnOnClick upon click 1`] = `
 <div>
   <div
     class="dropdown"
@@ -71,7 +71,7 @@ exports[`MdInput Component Should change value of testBtnOnClick upon click 1`]
 </div>
 `;
 
-exports[`MdInput Component Should render divider when an item is null 1`] = `
+exports[`DropdownMenu Component Should render divider when an item is null 1`] = `
 <div>
   <div
     class="dropdown"
diff --git a/stories/components/DropdownMenu.stories.tsx b/stories/components/DropdownMenu.stories.tsx
index cb68afb0b..a26918847 100644
--- a/stories/components/DropdownMenu.stories.tsx
+++ b/stories/components/DropdownMenu.stories.tsx
@@ -1,3 +1,4 @@
+import { KebabHorizontalIcon } from '@primer/octicons-react'
 import React from 'react'
 import { DropdownMenu } from '../../components/DropdownMenu'
 
@@ -31,3 +32,12 @@ export const Basic: React.FC = () => (
 export const _WithSeparators: React.FC = () => (
   <DropdownMenu title="Admin" items={separatedMenu} />
 )
+
+export const _WithCustomToggle: React.FC = () => (
+  <DropdownMenu
+    customToggle={{
+      Component: () => <KebabHorizontalIcon size={24} />
+    }}
+    items={separatedMenu}
+  />
+)