diff --git a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
index 7dee7f57893..0cf1368f0c2 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
+++ b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
@@ -36,6 +36,10 @@ describe("calcite-action-menu", () => {
 
   describe("defaults", () => {
     defaults("calcite-action-menu", [
+      {
+        propertyName: "appearance",
+        defaultValue: "solid",
+      },
       {
         propertyName: "expanded",
         defaultValue: false,
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.scss b/packages/calcite-components/src/components/action-menu/action-menu.scss
index 719900c2731..1132a6c1f9c 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.scss
+++ b/packages/calcite-components/src/components/action-menu/action-menu.scss
@@ -1,6 +1,5 @@
 :host {
-  @apply bg-foreground-1
-  text-color-2
+  @apply text-color-2
   text-1
   box-border
   flex
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.stories.ts b/packages/calcite-components/src/components/action-menu/action-menu.stories.ts
index 4b13ce64e8d..f79edeb4eb8 100644
--- a/packages/calcite-components/src/components/action-menu/action-menu.stories.ts
+++ b/packages/calcite-components/src/components/action-menu/action-menu.stories.ts
@@ -20,6 +20,15 @@ export const simple = (): string =>
     </calcite-action-menu>
   `;
 
+export const simpleTransparent_TestOnly = (): string =>
+  html`<div style="background-color:red">
+    <calcite-action-menu appearance="transparent">
+      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
+      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
+      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
+    </calcite-action-menu>
+  </div> `;
+
 export const open = (): string =>
   html`
     <calcite-action-menu open>
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx
index 72ca5cdfcd4..d98737a3aa8 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.tsx
+++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -22,7 +22,7 @@ import {
   setComponentLoaded,
   setUpLoadableComponent,
 } from "../../utils/loadable";
-import { Scale } from "../interfaces";
+import { Appearance, Scale } from "../interfaces";
 import { CSS, ICONS, SLOTS } from "./resources";
 
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
@@ -62,6 +62,9 @@ export class ActionMenu implements LoadableComponent {
   //
   // --------------------------------------------------------------------------
 
+  /** Specifies the appearance of the component. */
+  @Prop({ reflect: true }) appearance: Extract<"solid" | "transparent", Appearance> = "solid";
+
   /**
    * When `true`, the component is expanded.
    */
@@ -263,11 +266,12 @@ export class ActionMenu implements LoadableComponent {
   };
 
   renderMenuButton(): VNode {
-    const { label, scale, expanded } = this;
+    const { appearance, label, scale, expanded } = this;
 
     const menuButtonSlot = (
       <slot name={SLOTS.trigger} onSlotchange={this.setMenuButtonEl}>
         <calcite-action
+          appearance={appearance}
           class={CSS.defaultTrigger}
           icon={ICONS.menu}
           scale={scale}