diff --git a/.storybook/Welcome/__welcome-story.js b/.storybook/Welcome/__welcome-story.js
index 8516fb83a..da6405bba 100644
--- a/.storybook/Welcome/__welcome-story.js
+++ b/.storybook/Welcome/__welcome-story.js
@@ -1,10 +1,10 @@
 import { storiesOf } from '@storybook/vue3';
 import SvWelcome from './sv-welcome.vue';
 
-const stories = storiesOf('Welcome', module);
+const stories = storiesOf('Carbon', module);
 
 stories.add(
-  'default',
+  'Welcome',
   () => {
     // ----------------------------------------------------------------
     const templateViewString = `<sv-welcome></sv-welcome>`;
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 6a8db6842..47158269c 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -198,7 +198,7 @@ export const parameters = {
 };
 
 configureActions({
-  depth: 3,
+  clearOnStoryChange: true,
   limit: 10,
 });
 export const decorators = [
diff --git a/src/components/CvOverflowMenu/CvOverflowMenu.stories.mdx b/src/components/CvOverflowMenu/CvOverflowMenu.stories.mdx
new file mode 100644
index 000000000..a88d88ef2
--- /dev/null
+++ b/src/components/CvOverflowMenu/CvOverflowMenu.stories.mdx
@@ -0,0 +1,119 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { CvOverflowMenu } from '.';
+import { sbCompPrefix } from '@/global/storybook-utils';
+import { action } from '@storybook/addon-actions';
+import CvOverflowMenuItem from './CvOverflowMenuItem.vue';
+import { Meter20 as MeterIcon  } from '@carbon/icons-vue'
+
+<Meta title={`${sbCompPrefix}/CvOverflowMenu`} component={CvOverflowMenu} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvOverflowMenu,
+    CvOverflowMenuItem,
+    MeterIcon,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      ...args,
+      onChange: action('change', {clearOnStoryChange:true}),
+    };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: args.template,
+});
+const defaultTemplate = `
+<cv-overflow-menu
+  :flip-menu="flipMenu"
+  :up="up"
+  :offset="offset"
+  :label="label"
+  :tip-position="tipPosition"
+  :tip-alignment="tipAlignment"
+  @change=onChange>
+  <cv-overflow-menu-item value="item 1" primary-focus>list item 1</cv-overflow-menu-item>
+  <cv-overflow-menu-item value="item 2" disabled>list item 2</cv-overflow-menu-item>
+  <cv-overflow-menu-item value="item 3" danger>list item 3</cv-overflow-menu-item>
+</cv-overflow-menu>
+`;
+const slotsTemplate = `
+<cv-overflow-menu
+  :flip-menu="flipMenu"
+  :up="up"
+  :offset="offset"
+  :label="label"
+  :tip-position="tipPosition"
+  :tip-alignment="tipAlignment"
+  @change=onChange>
+  <template v-slot:trigger><meter-icon/></template>
+  <cv-overflow-menu-item value="item 1" primary-focus>list item 1</cv-overflow-menu-item>
+  <cv-overflow-menu-item value="item 2" disabled>list item 2</cv-overflow-menu-item>
+  <cv-overflow-menu-item value="item 3" danger>list item 3</cv-overflow-menu-item>
+</cv-overflow-menu>
+`;
+
+
+# CvOverflowMenu
+
+**Migration notes:**
+
+- The component now emits the "change" event when an item in the menu is clicked
+- The `flipMenu` parameter is supported but does not appear to work in Vue 2 or here
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: ['default', 'template', 'trigger', 'change'],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      label: 'Overflow menu',
+      flipMenu: undefined,
+      up: undefined,
+      offset: undefined,
+      tipPosition: undefined,
+      tipAlignment: undefined,
+    }}
+    argTypes={{
+      tipPosition: { control: 'select', default: 'right', options: ['top', 'left', 'bottom', 'right'] },
+      tipAlignment: { control: 'select', default: 'center', options: ['start', 'center', 'end'] },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+Use slots for more control over the display.
+
+<Canvas>
+  <Story
+    name="Slots"
+    parameters={{
+      controls: {
+        exclude: ['default', 'template', 'trigger', 'change'],
+      },
+      docs: { source: { code: slotsTemplate } },
+    }}
+    args={{
+      template: slotsTemplate,
+      label: 'Overflow menu',
+      flipMenu: undefined,
+      up: undefined,
+      offset: undefined,
+      tipPosition: undefined,
+      tipAlignment: undefined,
+    }}
+    argTypes={{
+      tipPosition: { control: 'select', default: 'right', options: ['top', 'left', 'bottom', 'right'] },
+      tipAlignment: { control: 'select', default: 'center', options: ['start', 'center', 'end'] },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
diff --git a/src/components/CvOverflowMenu/CvOverflowMenu.vue b/src/components/CvOverflowMenu/CvOverflowMenu.vue
new file mode 100644
index 000000000..7f3c12bf9
--- /dev/null
+++ b/src/components/CvOverflowMenu/CvOverflowMenu.vue
@@ -0,0 +1,287 @@
+<template>
+  <div
+    data-overflow-menu
+    :class="`cv-overflow-menu ${carbonPrefix}--overflow-menu`"
+    :id="uid"
+    ref="el"
+  >
+    <button
+      :class="[
+        `${carbonPrefix}--overflow-menu__trigger ${carbonPrefix}--tooltip__trigger`,
+        `${carbonPrefix}--tooltip--a11y`,
+        {
+          [`${carbonPrefix}--tooltip--${tipPosition}`]: label,
+          [`${carbonPrefix}--tooltip--align-${tipAlignment}`]: label,
+          [`${carbonPrefix}--overflow-menu--open`]: open,
+        },
+      ]"
+      aria-haspopup="true"
+      type="button"
+      :aria-expanded="open ? 'true' : 'false'"
+      :aria-controls="`${uid}-menu`"
+      :aria-labelledby="`${uid}`"
+      :id="`${uid}-trigger`"
+      ref="trigger"
+      @click="doToggle"
+      @keydown.space.prevent
+      @keyup.space.prevent="doToggle"
+      @keydown.enter.prevent="doToggle"
+      @keydown.tab="onOverflowMenuTab"
+    >
+      <span :class="`${carbonPrefix}--assistive-text`" v-if="label">{{
+        label
+      }}</span>
+
+      <slot name="trigger">
+        <OverflowMenuVertical16
+          :class="`${carbonPrefix}--overflow-menu__icon`"
+        />
+      </slot>
+    </button>
+    <div
+      :class="[
+        `${carbonPrefix}--overflow-menu-options`,
+        {
+          [`${carbonPrefix}--overflow-menu--flip`]: flipMenu,
+          [`${carbonPrefix}--overflow-menu-options--open`]: open,
+        },
+      ]"
+      tabindex="-1"
+      ref="popup"
+      :aria-labelledby="`${uid}-trigger`"
+      :id="`${uid}-menu`"
+      :style="{ left: left + 'px', top: top + 'px' }"
+      @focusout="checkFocusOut"
+      @mousedown.prevent="preventFocusOut"
+    >
+      <div
+        class="cv-overflow-menu__before-content"
+        ref="beforeContent"
+        tabindex="0"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px"
+        @focus="focusBeforeContent"
+      />
+      <ul :class="`${carbonPrefix}--overflow-menu-options__content`">
+        <slot></slot>
+      </ul>
+      <div
+        class="cv-overflow-menu__after-content"
+        ref="afterContent"
+        tabindex="0"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px"
+        @focus="focusAfterContent"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { props as propsCvId, useCvId } from '@/use/cvId';
+import OverflowMenuVertical16 from '@carbon/icons-vue/es/overflow-menu--vertical/16';
+import { computed, nextTick, onBeforeMount, onUnmounted, ref } from 'vue';
+import { getBus, removeBus } from '../../global/component-utils/event-bus';
+const props = defineProps({
+  /**
+   * assistive text shown as a tooltip
+   */
+  label: String,
+  /**
+   * moves caret from right to left of popup menu
+   */
+  flipMenu: { type: Boolean, default: false },
+  /**
+   * The menu will open upwards instead of the default
+   */
+  up: { type: Boolean, default: false },
+  /**
+   * optional offset setting for left and top position.
+   * e.g. { left: 0, top: 200 }
+   */
+  offset: {
+    type: Object,
+    validator(value) {
+      return value && value.left !== undefined && value.top !== undefined;
+      // value.hasOwnProperty('left') && value.hasOwnProperty('top');
+    },
+  },
+  /**
+   * top, left, right(default) or bottom
+   */
+  tipPosition: {
+    type: String,
+    default: 'right',
+    validator: val => ['top', 'left', 'bottom', 'right'].includes(val),
+  },
+  /**
+   * start, center(default) or end
+   */
+  tipAlignment: {
+    type: String,
+    default: 'center',
+    validator: val => ['start', 'center', 'end'].includes(val),
+  },
+  ...propsCvId,
+});
+const uid = useCvId(props, true);
+const open = ref(false);
+const left = ref(-9999); // offscreen,
+const top = ref(0);
+
+const offsetLeft = computed(() => {
+  return props.offset ? props.offset.left : 0;
+});
+const offsetTop = computed(() => {
+  return props.offset ? props.offset.top : 0;
+});
+
+let bus = undefined;
+onBeforeMount(() => {
+  bus = getBus(uid.value);
+  bus.on('cv:close', doClose);
+  bus.on('cv:click', menuItemClick);
+});
+onUnmounted(() => {
+  removeBus(uid.value);
+});
+
+const trigger = ref(null);
+const popup = ref(null);
+function checkFocusOut(ev) {
+  if (open.value) {
+    if (
+      ev.relatedTarget === null ||
+      !(
+        trigger.value === ev.relatedTarget ||
+        popup.value.contains(ev.relatedTarget)
+      )
+    ) {
+      open.value = false;
+      positionListen(false);
+
+      // DO NOT FOCUS if relatedTarget is not null, as focus is going somewhere
+      if (!ev.relatedTarget) {
+        nextTick(() => {
+          doFocus();
+        });
+      }
+    }
+  }
+}
+
+const emit = defineEmits({
+  change: payload => {
+    return 'string';
+  },
+});
+function menuItemClick(value) {
+  emit('change', `${value}`);
+  open.value = false;
+  positionListen(false);
+  nextTick(() => {
+    doFocus();
+  });
+}
+function doClose() {
+  open.value = false;
+  positionListen(false);
+}
+function positionListen(on) {
+  if (on) {
+    window.addEventListener('scroll', positionMenu);
+    window.addEventListener('resize', positionMenu);
+  } else {
+    window.removeEventListener('scroll', positionMenu);
+    window.removeEventListener('resize', positionMenu);
+  }
+}
+
+const el = ref(null);
+async function positionMenu() {
+  if (open.value) {
+    const menuPosition = el.value.getBoundingClientRect();
+    return nextTick(() => {
+      const pixelsScrolledX = window.scrollX || window.pageXOffset;
+      const pixelsScrolledY = window.scrollY || window.pageYOffset;
+      if (props.flipMenu) {
+        left.value =
+          menuPosition.left +
+          offsetLeft.value -
+          popup.value.offsetWidth +
+          el.value.offsetWidth +
+          pixelsScrolledX;
+      } else {
+        left.value = menuPosition.left + offsetLeft.value + pixelsScrolledX;
+      }
+      if (props.up) {
+        top.value =
+          menuPosition.top +
+          offsetTop.value -
+          popup.value.offsetHeight +
+          pixelsScrolledY;
+      } else {
+        top.value = menuPosition.left + offsetLeft.value + pixelsScrolledX;
+      }
+    });
+  }
+}
+function doFocus() {
+  let focusOn;
+  if (open.value) {
+    // set focus somewhere sensible, first focusable item or leave on overflow
+    let focusOnList = popup.value.querySelectorAll(
+      `.${carbonPrefix}--overflow-menu-options__btn, button, link, input, textarea, [contentEditable="true"], [tabindex]`
+    );
+    for (let tryOn of focusOnList) {
+      if (
+        // don't focus on before after or something that can't be tabbed to
+        !(
+          tryOn.classList.contains('cv-overflow-menu__before-content') ||
+          tryOn.classList.contains('cv-overflow-menu__after-content') ||
+          tryOn.tabindex < 0
+        )
+      ) {
+        focusOn = tryOn;
+        break;
+      }
+    }
+    if (!focusOn) {
+      focusOn = el.value;
+    }
+  } else {
+    focusOn = el.value;
+  }
+  focusOn.focus();
+}
+async function doToggle() {
+  open.value = !open.value;
+
+  // await positionMenu otherwise it can race doFocus.
+  // On initial open the menu is positioned 0,0 causing a jump
+  await positionMenu();
+  positionListen(open.value);
+  await nextTick(() => {
+    doFocus();
+  });
+}
+const beforeContent = ref(null);
+function onOverflowMenuTab(ev) {
+  if (!ev.shiftKey) {
+    // move focus before content tab press
+    beforeContent.value.focus();
+  }
+}
+function focusBeforeContent(ev) {
+  if (popup.value.contains(ev.relatedTarget)) {
+    trigger.value.focus();
+    open.value = false;
+  }
+}
+function focusAfterContent() {
+  trigger.value.focus();
+  open.value = false;
+}
+function preventFocusOut() {
+  // This is here to prevent focus being lost if the user clicks on the contents of the interactive tool tip
+}
+</script>
diff --git a/src/components/CvOverflowMenu/CvOverflowMenuItem.vue b/src/components/CvOverflowMenu/CvOverflowMenuItem.vue
new file mode 100644
index 000000000..bdc3c7a0e
--- /dev/null
+++ b/src/components/CvOverflowMenu/CvOverflowMenuItem.vue
@@ -0,0 +1,52 @@
+<template>
+  <li
+    :class="[
+      `cv-overflow-menu-item ${carbonPrefix}--overflow-menu-options__option`,
+      {
+        [`${carbonPrefix}--overflow-menu-options__option--disabled`]: disabled,
+        [`${carbonPrefix}--overflow-menu-options__option--danger`]: danger,
+      },
+    ]"
+    @keydown.esc.prevent="onEsc"
+    ref="el"
+  >
+    <button
+      type="button"
+      :class="`${carbonPrefix}--overflow-menu-options__btn`"
+      :data-floating-menu-primary-focus="primaryFocus"
+      :disabled="disabled"
+      @click="onClick"
+    >
+      <span :class="`${carbonPrefix}--overflow-menu-options__option-content`">
+        <slot></slot>
+      </span>
+    </button>
+  </li>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { onMounted, ref, useAttrs } from 'vue';
+import { getBus } from '@/global/component-utils/event-bus';
+
+defineProps({
+  primaryFocus: Boolean,
+  disabled: Boolean,
+  danger: Boolean,
+});
+let bus = undefined;
+const el = ref(null);
+onMounted(() => {
+  const pe = el.value.closest('[data-overflow-menu]');
+  const parent = pe?.getAttribute('id');
+  if (parent) bus = getBus(parent);
+  else console.warn('overflow menu not found');
+});
+const attrs = useAttrs();
+function onClick() {
+  bus?.emit('cv:click', attrs.value);
+}
+function onEsc() {
+  bus?.emit('cv:close');
+}
+</script>
diff --git a/src/components/CvOverflowMenu/index.js b/src/components/CvOverflowMenu/index.js
new file mode 100644
index 000000000..a177abe0c
--- /dev/null
+++ b/src/components/CvOverflowMenu/index.js
@@ -0,0 +1,3 @@
+import CvOverflowMenu from './CvOverflowMenu.vue';
+export { CvOverflowMenu };
+export default CvOverflowMenu;
diff --git a/src/global/component-utils/event-bus.js b/src/global/component-utils/event-bus.js
new file mode 100644
index 000000000..b9ad1288c
--- /dev/null
+++ b/src/global/component-utils/event-bus.js
@@ -0,0 +1,22 @@
+import { EventEmitter } from 'events';
+
+class EventBus extends EventEmitter {}
+
+const busses = {};
+/**
+ * Get an event bus
+ * @param {string} id unique id
+ * @returns {EventBus}
+ */
+export function getBus(id) {
+  if (!(id in busses)) busses[id] = new EventBus();
+  return busses[id];
+}
+/**
+ * Remove a previously created event bus
+ * @param {string} id unique id
+ * @returns {EventBus}
+ */
+export function removeBus(id) {
+  delete busses[id];
+}