diff --git a/TEMP-MIGRATION-CHANGELOG.md b/TEMP-MIGRATION-CHANGELOG.md
index 8cf239e0f9..8096686e3a 100644
--- a/TEMP-MIGRATION-CHANGELOG.md
+++ b/TEMP-MIGRATION-CHANGELOG.md
@@ -118,3 +118,7 @@ export default defineConfig({
 
 - `v-model` is now mapped to `modelValue` prop instead of `selected` prop.
 - Added type interface for `options` prop.
+
+### KMenu & KMenuItem
+
+- Added type interface for `items` prop.
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index e59e09073e..ffd815716d 100644
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -106,6 +106,7 @@ export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
               '/components/input',
               '/components/input-switch',
               '/components/label',
+              '/components/menu',
               '/components/modal',
               '/components/pagination',
               '/components/popover',
diff --git a/docs/components/menu.md b/docs/components/menu.md
new file mode 100644
index 0000000000..6145fa95a8
--- /dev/null
+++ b/docs/components/menu.md
@@ -0,0 +1,228 @@
+# Menu
+
+**KMenu** - Menu component
+
+<KMenu :items="getMenuItems(5)" />
+
+```vue
+<KMenu :items="items" />
+```
+
+## Props
+
+### items
+
+An array of items to populate the menu with. The value passed for the `items` prop should adhere to this type interface:
+
+```ts
+export interface MenuItem {
+  title: string
+  description?: string
+}
+
+export interface KMenuItemType extends MenuItem {
+  expandable: boolean
+  type: 'string' | 'number' | 'divider'
+}
+```
+
+Properties:
+
+- `title` - menu item label
+- `description` - text displayed when `expandable` item is expanded
+- `expandable` - boolean of whether or not this item is expandable
+- `type` - supported values: `string`, `number`, `divider`
+
+> Note: `type='divider'` will insert an empty item that is just an `<hr>`.
+
+<KMenu :items="getMenuItems(6)" />
+
+```vue
+<template>
+  <KMenu :items="getMenuItems(6)" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const getMenuItems = (count: number): [] => {
+      let menuItems = []
+      for (let i = 0; i < count; i++) {
+        menuItems.push({
+          title: 'Item ' + i,
+          type: 'string',
+          expandable: false,
+          description: 'The item description for number ' + i
+        })
+      }
+      return menuItems
+    }
+
+    return {
+      getMenuItems,
+    }
+  }
+})
+</script>
+```
+
+### width
+
+You can pass a `width` string for **KMenu**. Either the string `auto` or a string width, like `120`.
+
+By default the `width` is set to `284px`.
+
+<KMenu :items="getMenuItems(3)" />
+
+```vue
+<KMenu :items="getMenuItems(3)" width="735" />
+```
+
+## KMenuItem
+
+**KMenu** generates a **KMenuItem** for each item in the `items` property.
+
+### Properties
+
+- `item` - the menu item content is built from this.
+  - Properties:
+    - `title` - menu item label
+    - `description` - text displayed when `expandable` item is expanded
+  - Interface:
+    ```ts
+    export interface MenuItem {
+      title: string
+      description?: string
+    }
+    ```
+- `type` - supported values: `string`, `number`, `divider`
+- `expandable` - boolean of whether or not this item is expandable
+- `lastMenuItem` - boolean of whether or not this is the last item in the menu (for styling)
+
+```vue
+  <KMenuItem :item="{ title: 'some title', description: 'some description' }" :expandable="true" type="string" />
+```
+
+### Item Slots
+
+- `itemTitle` - the title content for the menu item
+- `itemBody` - the body content for the menu item
+
+```vue
+<KMenuItem>
+  <template v-slot:itemTitle>
+    Custom Title!
+  </template>
+  <template v-slot:itemBody>
+    Vivamus blandit metus eu nisi venenatis, vel convallis neque mollis. In enim lectus.
+  </template>
+</KMenuItem>
+```
+
+## Slots
+
+- `body` - The body of the menu, we expect this to be an array of `KMenuItem` components. This should be used instead of the `items` property.
+- `actionButton` - the button at the bottom of the menu
+
+<KMenu>
+  <template v-slot:body>
+    <KMenuItem v-for="item in getMenuItems(3)" :key="item.title" :item="item" />
+    <KMenuItem>
+      <template v-slot:itemTitle>
+        Look mah!
+      </template>
+      <template v-slot:itemBody>
+        <div>Cowabunga dude!</div>
+      </template>
+    </KMenuItem>
+    <KMenuItem type="divider" />
+    <KMenuItem :expandable="true" :item="customItem" type="string" />
+    <KMenuItem :expandable="true" last-menu-item >
+      <template v-slot:itemTitle>
+          <span>Updated</span>
+      </template>
+      <template v-slot:itemBody>
+        <div>Vivamus blandit metus eu nisi venenatis, vel convallis neque mollis. In enim lectus, dignissim nec iaculis id, sodales quis nulla. Mauris pellentesque bibendum dui sed dictum.</div>
+      </template>
+    </KMenuItem>
+  </template>
+  <template v-slot:actionButton>
+    <KButton>Clear all the filters</KButton>
+  </template>
+</KMenu>
+
+```vue
+<KMenu>
+  <template v-slot:body>
+    <KMenuItem v-for="item in getMenuItems(3)" :item="item" />
+    <KMenuItem>
+      <template v-slot:itemTitle>
+        Look mah!
+      </template>
+      <template v-slot:itemBody>
+        <div>Cowabunga dude!</div>
+      </template>
+    </KMenuItem>
+
+    <KMenuItem type="divider" />
+
+    <KMenuItem :expandable="true" :item="customItem" type="string" />
+    <KMenuItem :expandable="true" last-menu-item>
+      <template v-slot:itemTitle>
+        <span>Updated</span>
+      </template>
+      <template v-slot:itemBody>
+        <div>Vivamus blandit metus eu nisi venenatis, vel convallis neque mollis. In enim lectus, dignissim nec iaculis id, sodales quis nulla. Mauris pellentesque bibendum dui sed dictum.</div>
+      </template>
+    </KMenuItem>
+  </template>
+  <template v-slot:actionButton>
+    <KButton>Clear all the filters</KButton>
+  </template>
+</KMenu>
+```
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const getMenuItems = (count: number) => {
+      let menuItems = []
+      for (let i = 0; i < count; i++) {
+        menuItems.push({
+          title: 'Item ' + i,
+          type: 'string',
+          expandable: false,
+          description: 'The item description for number ' + i
+        })
+      }
+      return menuItems
+    }
+
+    const customItem = {
+      title: "Item #",
+      description: "Cras aliquet auctor ex ut hendrerit. Donec sagittis est nec aliquet semper. Quisque feugiat metus orci, at ullamcorper odio molestie non. Nam dignissim sed ligula ut commodo."
+    }
+
+    return {
+      getMenuItems,
+      customItem,
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.KMenu-wrapper {
+  --KMenu-wrapperBorderColor: lime;
+}
+
+div.menu-content div {
+  white-space: normal;
+  margin-right: 22px;
+  text-align: justify;
+}
+</style>
diff --git a/src/components/KMenu/KMenu.spec.ts b/src/components/KMenu/KMenu.spec.ts
new file mode 100644
index 0000000000..3073e6d8ca
--- /dev/null
+++ b/src/components/KMenu/KMenu.spec.ts
@@ -0,0 +1,62 @@
+// Import types for custom commands
+/// <reference types="../../cypress/support" />
+
+import { mount } from '@cypress/vue'
+import KMenu from '@/components/KMenu/KMenu.vue'
+import type { KMenuItemType } from '@/components/KMenu/KMenu.vue'
+
+/**
+ * ALL TESTS MUST USE testMode: true
+ * We generate unique IDs for reference by aria properties. Test mode strips these out
+ * allowing for successful snapshot verification.
+ * props: {
+ *   testMode: true
+ * }
+ */
+
+const getItems = (count: number): KMenuItemType[] => {
+  const myItems = []
+
+  for (let i = 0; i < count; i++) {
+    myItems.push({
+      title: 'Item ' + i,
+      type: Math.random() < 0.5 ? 'string' : 'number',
+      expandable: Math.random() < 0.5,
+      description: "The item's description for number " + i,
+    })
+  }
+
+  return myItems
+}
+
+const customItem = {
+  title: 'Item #',
+  description: 'Cras aliquet auctor ex ut hendrerit. Donec sagittis est nec aliquet semper. Quisque feugiat metus orci, at ullamcorper odio molestie non. Nam dignissim sed ligula ut commodo.',
+  expandable: true,
+}
+
+describe('KMenu', () => {
+  it('renders proper menu when using props', () => {
+    mount(KMenu, {
+      props: {
+        items: getItems(5),
+        testMode: true,
+      },
+    })
+
+    cy.get('.k-menu').should('be.visible')
+    cy.get('.k-menu-item').should('have.length', 5)
+  })
+
+  it('shows chevron down icon', () => {
+    mount(KMenu, {
+      props: {
+        items: [customItem],
+        testMode: true,
+      },
+    })
+
+    cy.get('.k-menu').should('be.visible')
+    cy.get('.k-menu-item .k-button .span-icon-container').should('be.visible')
+  })
+})
diff --git a/src/components/KMenu/KMenu.vue b/src/components/KMenu/KMenu.vue
new file mode 100644
index 0000000000..afb8e813fb
--- /dev/null
+++ b/src/components/KMenu/KMenu.vue
@@ -0,0 +1,130 @@
+<template>
+  <div
+    :style="widthStyle"
+    class="k-menu"
+  >
+    <slot name="body">
+      <div>
+        <template
+          v-for="(item, index) in items"
+          :key="item.title + index"
+        >
+          <KMenuItem
+            :item="item"
+            :expandable="item.expandable"
+            :type="item.type"
+            :last-menu-item="index === items.length - 1"
+            :test-mode="testMode"
+            :class="{ 'last-menu-item': index === items.length - 1 }"
+          />
+        </template>
+      </div>
+    </slot>
+    <div
+      v-if="hasActionButton"
+      class="clear-cta-button"
+    >
+      <KMenuDivider />
+      <slot name="actionButton">
+        <KButton
+          @click="proceed"
+          @keyup.enter="proceed"
+        />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, PropType } from 'vue'
+import KMenuItem from '@/components/KMenu/KMenuItem.vue'
+import type { MenuItem } from '@/components/KMenu/KMenuItem.vue'
+import KMenuDivider from '@/components/KMenu/KMenuDivider.vue'
+
+export interface KMenuItemType extends MenuItem {
+  expandable: boolean
+  type: 'string' | 'number' | 'divider'
+}
+
+export default defineComponent({
+  name: 'KMenu',
+  components: { KMenuItem, KMenuDivider },
+  props: {
+    items: {
+      type: Array as PropType<KMenuItemType[]>,
+      required: false,
+      default: () => [],
+    },
+    actionButton: {
+      type: String,
+      default: '',
+    },
+    width: {
+      type: String,
+      default: '284',
+    },
+    /**
+     * Test mode - for testing only, strips out generated ids
+     */
+    testMode: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['proceed'],
+  setup(props, { emit, slots }) {
+    const widthStyle = computed((): Record<string, string> => {
+      return {
+        width: props.width === 'auto' || props.width.includes('px') ? props.width : props.width + 'px',
+      }
+    })
+
+    const hasActionButton = computed((): boolean => !!slots.actionButton)
+
+    const proceed = (): void => {
+      emit('proceed')
+    }
+
+    return {
+      widthStyle,
+      hasActionButton,
+      proceed,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables';
+
+.k-menu {
+  background-color: var(--white);
+  border: 1px solid var(--grey-300);
+  border-radius: 4px;
+  padding-top: 11px;
+  padding-bottom: 8px;
+}
+
+.clear-cta-button > :deep(button.k-button) {
+  border: none;
+  color: var(--blue-300);
+  font-weight: 500;
+  font-size: 13px;
+  line-height: 13px;
+  margin-bottom: 6px;
+  margin-top: 10px;
+  padding-top: 2px;
+
+  &:active, &:hover {
+    color: var(--blue-500);
+    background-color: transparent;
+  }
+
+  &:focus {
+    box-shadow: none;
+    color: var(--blue-500);
+    background-color: transparent;
+  }
+}
+
+</style>
diff --git a/src/components/KMenu/KMenuDivider.vue b/src/components/KMenu/KMenuDivider.vue
new file mode 100644
index 0000000000..8b43eb31ac
--- /dev/null
+++ b/src/components/KMenu/KMenuDivider.vue
@@ -0,0 +1,22 @@
+
+<template>
+  <div class="k-menu-item-divider">
+    <hr>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'KMenuDivider',
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables';
+
+.k-menu-item-divider {
+  padding: 0 19px 0 19px;
+}
+</style>
diff --git a/src/components/KMenu/KMenuItem.vue b/src/components/KMenu/KMenuItem.vue
new file mode 100644
index 0000000000..631adcd355
--- /dev/null
+++ b/src/components/KMenu/KMenuItem.vue
@@ -0,0 +1,182 @@
+<template>
+  <div
+    :id="menuItemId"
+    :data-testid="item ? `${item.title.replace(' ', '-')}-menu-item` : 'menu-item'"
+    :test-mode="testMode"
+    :class="[isOpen ? 'title-dark' : '', {'expando-item' : expandable}]"
+    class="k-menu-item"
+  >
+    <KButton
+      v-if="type !== 'divider'"
+      :aria-expanded="isOpen && expandable"
+      :aria-labelledby="menuItemId"
+      :is-rounded="false"
+      type="button"
+      class="menu-button non-visual-button"
+      @click="toggleMenuItem"
+    >
+      <span
+        :class="isOpen && expandable ? 'title-dark' : ''"
+        class="span-menu-title"
+      >
+        <slot name="itemTitle">
+          {{ item ? item.title : '' }}
+        </slot>
+      </span>
+      <span
+        v-if="expandable"
+        class="span-icon-container"
+      >
+        <KIcon
+          :icon="isOpen ? 'chevronUp' : 'chevronDown'"
+          color="var(--grey-400)"
+          size="16"
+        />
+      </span>
+    </KButton>
+    <div
+      v-if="expandable"
+      :class="isOpen ? 'd-flex' : 'd-none'"
+      class="menu-content"
+    >
+      <slot name="itemBody">
+        <div v-if="(type === 'string' || type === 'divider') && expandable">
+          {{ item ? item.description : '' }}
+        </div>
+        <div v-else-if="(type === 'number' || type === 'divider') && expandable">
+          {{ item ? item.description : '' }}
+        </div>
+      </slot>
+    </div>
+    <div v-if="!lastMenuItem && (type === 'divider' || expandable)">
+      <KMenuDivider />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, PropType } from 'vue'
+import KButton from '@/components/KButton/KButton.vue'
+import KIcon from '@/components/KIcon/KIcon.vue'
+import KMenuDivider from '@/components/KMenu/KMenuDivider.vue'
+import { v1 as uuidv1 } from 'uuid'
+
+export interface MenuItem {
+  title: string
+  description?: string
+}
+
+export default defineComponent({
+  name: 'KMenuItem',
+  components: { KButton, KIcon, KMenuDivider },
+  props: {
+    item: {
+      type: Object as PropType<MenuItem>,
+      default: null,
+    },
+    expandable: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      default: 'string',
+      validator: (val: string): boolean => ['string', 'number', 'divider'].includes(val),
+    },
+    lastMenuItem: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Test mode - for testing only, strips out generated ids
+     */
+    testMode: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['clicked'],
+  setup(props, { emit, slots }) {
+    const isOpen = ref(false)
+    const menuItemId = computed((): string => !props.testMode ? uuidv1() : 'test-menuitem-id-1234')
+
+    const toggleMenuItem = (): void => {
+      if (props.expandable) {
+        isOpen.value = !isOpen.value
+      } else {
+        emit('clicked', (slots.itemTitle || props.item))
+      }
+    }
+
+    return {
+      isOpen,
+      menuItemId,
+      toggleMenuItem,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables';
+
+.k-menu-item {
+  list-style: none;
+  margin: 0;
+  white-space: nowrap;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 24px;
+  color: var(--grey-500);
+  position: relative;
+  padding-left: 2px;
+}
+
+.span-icon-container {
+  margin-left: auto;
+  height: 24px;
+  width: 24px;
+}
+
+.title-dark {
+  color: var(--grey-600);
+}
+
+.k-menu-item .menu-button {
+  padding-left: 19px;
+  padding-right: 24px;
+  cursor: pointer !important;
+  &:hover {
+    color: var(--grey-600);
+  }
+}
+
+.menu-content {
+  padding-left: 19px;
+  padding-right: 24px;
+  color: var(--grey-500);
+}
+
+.k-button.menu-button {
+  width: 100%;
+  color: var(--KButtonOutlineColor, var(--grey-500));
+  font-weight: 400 !important;
+  font-family: var(--font-family-sans);
+  font-size: 13px;
+  line-height: 24px;
+  &:focus {
+    box-shadow: 0 0 0 1px var(--blue-200);
+  }
+}
+
+.k-button.medium {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.k-menu-item.expando-item > button + div + hr,
+.last-menu-item,
+.last-menu-item > button + div + hr,
+.k-menu-item:last-of-type {
+  border: 0;
+}
+</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index 01820b9e8b..e941d0339a 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -38,3 +38,5 @@ export { default as KInputSwitch } from './KInputSwitch/KInputSwitch.vue'
 export { default as KTabs } from './KTabs/KTabs.vue'
 export { default as KSlideout } from './KSlideout/KSlideout.vue'
 export { default as KSegmentedControl } from './KSegmentedControl/KSegmentedControl.vue'
+export { default as KMenu } from './KMenu/KMenu.vue'
+export { default as KMenuItem } from './KMenu/KMenuItem.vue'