diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a5e6c02c..07175fb41 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### BREAKING CHANGES
 - Fix `firstFocusableSelector` in `FocusTrapZone` and `AutoFocusZone` @sophieH29 ([#1732](https://github.com/stardust-ui/react/pull/1732))
+- Rename Popup `shouldTriggerBeTabbable` prop to `tabbableTrigger` @jurokapsiar ([#1696](https://github.com/stardust-ui/react/pull/1696))
 - `StackableEventListener` is removed @layershifter ([#1755](https://github.com/stardust-ui/react/pull/1755))
 - Rename `Tree` to `HierarchicalTree` @silviuavram ([#1752](https://github.com/stardust-ui/react/pull/1752))
 
@@ -36,6 +37,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Export `call-blocked` icon to Teams theme @francescopalmiotto ([#1736](https://github.com/stardust-ui/react/pull/1736))
 - Add support for component styles debugging @kuzhelov ([#1726](https://github.com/stardust-ui/react/pull/1726))
 - Use FocusZone in selectable list @jurokapsiar ([#1757](https://github.com/stardust-ui/react/pull/1757))
+- Add `MenuButton` component @jurokapsiar ([#1696](https://github.com/stardust-ui/react/pull/1696))
 - Add `useEventListener` hook @layershifter ([#1755](https://github.com/stardust-ui/react/pull/1755))
 
 ### Documentation
diff --git a/docs/src/components/ComponentPlayground/ComponentPlayground.tsx b/docs/src/components/ComponentPlayground/ComponentPlayground.tsx
index ef45dedfa..cbd66f669 100644
--- a/docs/src/components/ComponentPlayground/ComponentPlayground.tsx
+++ b/docs/src/components/ComponentPlayground/ComponentPlayground.tsx
@@ -23,6 +23,7 @@ const unsupportedComponents = [
   'ItemLayout',
   'Layout',
   'List',
+  'MenuButton',
   'Portal',
   'Provider',
   'RadioGroup',
diff --git a/docs/src/components/DocsBehaviorRoot.tsx b/docs/src/components/DocsBehaviorRoot.tsx
index ea1e3ecd4..a1b9c41f0 100644
--- a/docs/src/components/DocsBehaviorRoot.tsx
+++ b/docs/src/components/DocsBehaviorRoot.tsx
@@ -29,14 +29,15 @@ class DocsBehaviorRoot extends React.Component<any, any> {
     }
 
     const { match } = this.props
-    const pageTitle = `${_.capitalize(match.params.name)} accessibility behaviors`
+    const componentName = _.upperFirst(_.camelCase(match.params.name))
+    const pageTitle = `${componentName} accessibility behaviors`
     return (
       <DocumentTitle title={pageTitle}>
         <Segment styles={{ backgroundColor: 'transparent' }}>
           <Header as="h1" aria-level={2} content={pageTitle} />
 
           {behaviorMenuItems
-            .find(behavior => behavior.displayName === _.capitalize(match.params.name))
+            .find(behavior => behavior.displayName === componentName)
             .variations.map((variation, keyValue) => (
               <React.Fragment key={keyValue}>
                 <Segment
diff --git a/docs/src/examples/components/MenuButton/Rtl/MenuButtonExample.rtl.steps.ts b/docs/src/examples/components/MenuButton/Rtl/MenuButtonExample.rtl.steps.ts
new file mode 100644
index 000000000..c47b88fbf
--- /dev/null
+++ b/docs/src/examples/components/MenuButton/Rtl/MenuButtonExample.rtl.steps.ts
@@ -0,0 +1,7 @@
+import { Button } from '@stardust-ui/react'
+
+const config: ScreenerTestsConfig = {
+  steps: [builder => builder.click(`.${Button.className}`).snapshot('RTL: Shows menuButton')],
+}
+
+export default config
diff --git a/docs/src/examples/components/MenuButton/Rtl/MenuButtonExample.rtl.tsx b/docs/src/examples/components/MenuButton/Rtl/MenuButtonExample.rtl.tsx
new file mode 100644
index 000000000..a072a116a
--- /dev/null
+++ b/docs/src/examples/components/MenuButton/Rtl/MenuButtonExample.rtl.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react'
+import { Button, MenuButton } from '@stardust-ui/react'
+
+const MenuButtonExampleRtl = () => (
+  <MenuButton
+    trigger={<Button content="ا يجلبه إلينا الأس" />}
+    menu={['English text!', 'غالباً ونرفض الشعور']}
+  />
+)
+
+export default MenuButtonExampleRtl
diff --git a/docs/src/examples/components/MenuButton/Rtl/index.tsx b/docs/src/examples/components/MenuButton/Rtl/index.tsx
new file mode 100644
index 000000000..4c792149b
--- /dev/null
+++ b/docs/src/examples/components/MenuButton/Rtl/index.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import NonPublicSection from 'docs/src/components/ComponentDoc/NonPublicSection'
+
+const Rtl = () => (
+  <NonPublicSection title="Rtl">
+    <ComponentExample examplePath="components/MenuButton/Rtl/MenuButtonExample.rtl" />
+  </NonPublicSection>
+)
+
+export default Rtl
diff --git a/docs/src/examples/components/MenuButton/State/MenuButtonExampleOpen.shorthand.tsx b/docs/src/examples/components/MenuButton/State/MenuButtonExampleOpen.shorthand.tsx
new file mode 100644
index 000000000..2b3370301
--- /dev/null
+++ b/docs/src/examples/components/MenuButton/State/MenuButtonExampleOpen.shorthand.tsx
@@ -0,0 +1,18 @@
+import { useBooleanKnob } from '@stardust-ui/docs-components'
+import * as React from 'react'
+import { Button, MenuButton } from '@stardust-ui/react'
+
+const MenuButtonOpenExample = () => {
+  const [open, setOpen] = useBooleanKnob({ name: 'open', initialValue: true })
+
+  return (
+    <MenuButton
+      open={open}
+      onOpenChange={(e, { open }) => setOpen(open)}
+      trigger={<Button icon="expand" title="Open MenuButton" />}
+      menu={['1', '2', '3', { content: 'submenu', menu: ['4', '5'] }]}
+    />
+  )
+}
+
+export default MenuButtonOpenExample
diff --git a/docs/src/examples/components/MenuButton/State/index.tsx b/docs/src/examples/components/MenuButton/State/index.tsx
new file mode 100644
index 000000000..e2c6cf384
--- /dev/null
+++ b/docs/src/examples/components/MenuButton/State/index.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const State = () => (
+  <ExampleSection title="State">
+    <ComponentExample
+      title="Open"
+      description="Note that if MenuButton is controlled, then its 'open' prop value could be changed either by parent component, or by user actions (e.g. key press) - thus it is necessary to handle 'onOpenChange' event."
+      examplePath="components/MenuButton/State/MenuButtonExampleOpen"
+    />
+  </ExampleSection>
+)
+
+export default State
diff --git a/docs/src/examples/components/MenuButton/Usage/MenuButtonExampleContextMenu.shorthand.tsx b/docs/src/examples/components/MenuButton/Usage/MenuButtonExampleContextMenu.shorthand.tsx
new file mode 100644
index 000000000..757ede36e
--- /dev/null
+++ b/docs/src/examples/components/MenuButton/Usage/MenuButtonExampleContextMenu.shorthand.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { Alert, Button, MenuButton } from '@stardust-ui/react'
+
+const items = ['1', '2', '3', { content: 'submenu', menu: { items: ['4', '5'] } }]
+
+class MenuButtonOnElement extends React.Component {
+  state = { alert: false }
+
+  showAlert = () => {
+    this.setState({ alert: true })
+    setTimeout(() => this.setState({ alert: false }), 2000)
+  }
+
+  render() {
+    return (
+      <>
+        <MenuButton
+          contextMenu
+          trigger={
+            <div style={{ padding: '4rem', border: 'red dashed' }}>
+              <Button content="Random button" onClick={this.showAlert} />
+            </div>
+          }
+          menu={{ items }}
+        />
+        {this.state.alert && <Alert warning content="Click!" />}
+      </>
+    )
+  }
+}
+
+export default MenuButtonOnElement
diff --git a/docs/src/examples/components/MenuButton/Usage/MenuButtonExampleOn.shorthand.tsx b/docs/src/examples/components/MenuButton/Usage/MenuButtonExampleOn.shorthand.tsx
new file mode 100644
index 000000000..4dad51a8b
--- /dev/null
+++ b/docs/src/examples/components/MenuButton/Usage/MenuButtonExampleOn.shorthand.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { Alert, Button, Flex, MenuButton } from '@stardust-ui/react'
+
+class MenuButtonExampleOn extends React.Component {
+  state = { alert: false }
+
+  showAlert = () => {
+    this.setState({ alert: true })
+    setTimeout(() => this.setState({ alert: false }), 2000)
+  }
+
+  render() {
+    return (
+      <>
+        <Flex gap="gap.smaller">
+          <MenuButton
+            trigger={<Button icon="expand" content="Click" aria-label="Click button" />}
+            menu={['1', '2', '3', { content: 'submenu', menu: { items: ['4', '5'] } }]}
+            on="click"
+          />
+          <MenuButton
+            trigger={<Button icon="expand" content="Hover" aria-label="Hover button" />}
+            menu={['1', '2', '3', { content: 'submenu', menu: { items: ['4', '5'] } }]}
+            on="hover"
+          />
+          <MenuButton
+            trigger={<Button icon="expand" content="Focus" aria-label="Focus button" />}
+            menu={['1', '2', '3', { content: 'submenu', menu: { items: ['4', '5'] } }]}
+            on="focus"
+          />
+          <MenuButton
+            trigger={
+              <Button
+                icon="expand"
+                content="Context"
+                aria-label="Context button"
+                onClick={this.showAlert}
+              />
+            }
+            menu={['1', '2', '3', { content: 'submenu', menu: { items: ['4', '5'] } }]}
+            on="context"
+          />
+        </Flex>
+        {this.state.alert && (
+          <Alert
+            warning
+            content="Right, you can still click the button! Right click opens the MenuButton."
+          />
+        )}
+      </>
+    )
+  }
+}
+
+export default MenuButtonExampleOn
diff --git a/docs/src/examples/components/MenuButton/Usage/index.tsx b/docs/src/examples/components/MenuButton/Usage/index.tsx
new file mode 100644
index 000000000..21d5b8687
--- /dev/null
+++ b/docs/src/examples/components/MenuButton/Usage/index.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Usage = () => (
+  <ExampleSection title="Usage">
+    <ComponentExample
+      title="Triggering menu on different actions"
+      description="A context menu can be triggered on click, hover, focus or context."
+      examplePath="components/MenuButton/Usage/MenuButtonExampleOn"
+    />
+    <ComponentExample
+      title="Context menu"
+      description="A menu button can be attached to any element to create a context menu."
+      examplePath="components/MenuButton/Usage/MenuButtonExampleContextMenu"
+    />
+  </ExampleSection>
+)
+
+export default Usage
diff --git a/docs/src/examples/components/MenuButton/index.tsx b/docs/src/examples/components/MenuButton/index.tsx
new file mode 100644
index 000000000..17dbfd37a
--- /dev/null
+++ b/docs/src/examples/components/MenuButton/index.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+import Rtl from './Rtl'
+import Usage from './Usage'
+import State from './State'
+
+const MenuButtonExamples = () => (
+  <>
+    <Usage />
+    <State />
+    <Rtl />
+  </>
+)
+
+export default MenuButtonExamples
diff --git a/docs/src/examples/components/Popup/Usage/PopupExampleContextOnElement.tsx b/docs/src/examples/components/Popup/Usage/PopupExampleContextOnElement.tsx
index e3f2161a1..5d5f13e71 100644
--- a/docs/src/examples/components/Popup/Usage/PopupExampleContextOnElement.tsx
+++ b/docs/src/examples/components/Popup/Usage/PopupExampleContextOnElement.tsx
@@ -27,7 +27,7 @@ class PopupContextOnElement extends React.Component {
               <Button content="Random button" onClick={this.showAlert} />
             </div>
           }
-          shouldTriggerBeTabbable={false}
+          tabbableTrigger={false}
           content={contentWithButtons}
           trapFocus
           on="context"
diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx
index be1a09074..5a2ee91d9 100644
--- a/packages/react/src/components/Menu/Menu.tsx
+++ b/packages/react/src/components/Menu/Menu.tsx
@@ -20,7 +20,13 @@ import { menuBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
 import { ReactAccessibilityBehavior } from '../../lib/accessibility/reactTypes'
 import { ComponentVariablesObject, ComponentSlotStylesPrepared } from '../../themes/types'
-import { WithAsProp, ShorthandCollection, ShorthandValue, withSafeTypeForAs } from '../../types'
+import {
+  WithAsProp,
+  ShorthandCollection,
+  ShorthandValue,
+  withSafeTypeForAs,
+  ComponentEventHandler,
+} from '../../types'
 import MenuDivider from './MenuDivider'
 import { IconProps } from '../Icon/Icon'
 
@@ -53,6 +59,14 @@ export interface MenuProps extends UIComponentProps, ChildrenComponentProps {
   /** Shorthand array of props for Menu. */
   items?: ShorthandCollection<MenuItemProps, MenuShorthandKinds>
 
+  /**
+   * Called when a panel title is clicked.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All item props.
+   */
+  onItemClick?: ComponentEventHandler<MenuItemProps>
+
   /** A menu can adjust its appearance to de-emphasize its contents. */
   pills?: boolean
 
@@ -106,6 +120,7 @@ class Menu extends AutoControlledComponent<WithAsProp<MenuProps>, MenuState> {
     fluid: PropTypes.bool,
     iconOnly: PropTypes.bool,
     items: customPropTypes.collectionShorthandWithKindProp(['divider', 'item']),
+    onItemClick: PropTypes.func,
     pills: PropTypes.bool,
     pointing: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['start', 'end'])]),
     primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
@@ -132,6 +147,7 @@ class Menu extends AutoControlledComponent<WithAsProp<MenuProps>, MenuState> {
 
       this.trySetState({ activeIndex: index })
 
+      _.invoke(this.props, 'onItemClick', e, itemProps)
       _.invoke(predefinedProps, 'onClick', e, itemProps)
     },
     onActiveChanged: (e, props) => {
diff --git a/packages/react/src/components/MenuButton/MenuButton.tsx b/packages/react/src/components/MenuButton/MenuButton.tsx
new file mode 100644
index 000000000..0b381b747
--- /dev/null
+++ b/packages/react/src/components/MenuButton/MenuButton.tsx
@@ -0,0 +1,298 @@
+import * as React from 'react'
+import * as PropTypes from 'prop-types'
+import * as _ from 'lodash'
+import * as customPropTypes from '@stardust-ui/react-proptypes'
+
+import {
+  AutoControlledComponent,
+  RenderResultConfig,
+  applyAccessibilityKeyHandlers,
+  getOrGenerateIdFromShorthand,
+  commonPropTypes,
+  StyledComponentProps,
+} from '../../lib'
+import { ShorthandValue, ComponentEventHandler, ShorthandCollection } from '../../types'
+
+import { Accessibility } from '../../lib/accessibility/types'
+import { createShorthandFactory } from '../../lib/factories'
+import Popup, { PopupProps, PopupEvents, PopupEventsArray } from '../Popup/Popup'
+import Menu, { MenuProps } from '../Menu/Menu'
+import { MenuItemProps } from '../Menu/MenuItem'
+import { Ref } from '@stardust-ui/react-component-ref'
+import { menuButtonBehavior } from '../../lib/accessibility'
+import { focusMenuItem } from './focusUtils'
+import { ALIGNMENTS, POSITIONS, PositioningProps } from '../../lib/positioner'
+
+export interface MenuButtonSlotClassNames {
+  menu: string
+}
+
+export interface MenuButtonProps extends StyledComponentProps<MenuButtonProps>, PositioningProps {
+  /**
+   * Accessibility behavior if overridden by the user.
+   * @default menuButtonBehavior
+   */
+  accessibility?: Accessibility
+
+  /** Additional CSS class name(s) to apply.  */
+  className?: string
+
+  /** Initial value for 'open'. */
+  defaultOpen?: boolean
+
+  /** Existing document the popup should add listeners. */
+  mountDocument?: Document
+
+  /** Existing element the popup should be bound to. */
+  mountNode?: HTMLElement
+
+  /** Delay in ms for the mouse leave event, before the popup will be closed. */
+  mouseLeaveDelay?: number
+
+  /** Events triggering the popup. */
+  on?: PopupEvents | PopupEventsArray
+
+  /** Defines whether popup is displayed. */
+  open?: boolean
+
+  /**
+   * Event for request to change 'open' value.
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props and proposed value.
+   */
+  onOpenChange?: ComponentEventHandler<PopupProps>
+
+  /** A popup can show a pointer to trigger. */
+  pointing?: boolean
+
+  /**
+   * DOM element that should be used as popup's target - instead of 'trigger' element that is used by default.
+   */
+  target?: HTMLElement
+
+  /** Element to be rendered in-place where the popup is defined. */
+  trigger?: JSX.Element
+
+  /** Whether the trigger should be tabbable */
+  tabbableTrigger?: boolean
+
+  /** Shorthand for menu configuration */
+  menu?: ShorthandValue<MenuProps> | ShorthandCollection<MenuItemProps>
+
+  /** Determines if the MenuButton behaves as context menu */
+  contextMenu?: boolean
+}
+
+export interface MenuButtonState {
+  open: boolean
+  menuId: string
+  triggerId: string
+}
+
+/**
+ * A MenuButton displays a menu connected to trigger element.
+ * @accessibility
+ */
+export default class MenuButton extends AutoControlledComponent<MenuButtonProps, MenuButtonState> {
+  static displayName = 'MenuButton'
+
+  static className = 'ui-menubutton'
+
+  static create: Function
+
+  static slotClassNames: MenuButtonSlotClassNames = {
+    menu: `${MenuButton.className}__menu`,
+  }
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({
+      animated: false,
+      as: true,
+      content: false,
+    }),
+    align: PropTypes.oneOf(ALIGNMENTS),
+    defaultOpen: PropTypes.bool,
+    mountDocument: PropTypes.object,
+    mountNode: customPropTypes.domNode,
+    mouseLeaveDelay: PropTypes.number,
+    offset: PropTypes.string,
+    on: PropTypes.oneOfType([
+      PropTypes.oneOf(['hover', 'click', 'focus', 'context']),
+      PropTypes.arrayOf(PropTypes.oneOf(['click', 'focus', 'context'])),
+      PropTypes.arrayOf(PropTypes.oneOf(['hover', 'focus', 'context'])),
+    ]),
+    open: PropTypes.bool,
+    onOpenChange: PropTypes.func,
+    position: PropTypes.oneOf(POSITIONS),
+    target: PropTypes.any,
+    trigger: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.any]),
+    tabbableTrigger: PropTypes.bool,
+    unstable_pinned: PropTypes.bool,
+    menu: PropTypes.oneOfType([
+      customPropTypes.itemShorthandWithoutJSX,
+      PropTypes.arrayOf(customPropTypes.itemShorthandWithoutJSX),
+    ]),
+    contextMenu: PropTypes.bool,
+  }
+
+  static defaultProps: MenuButtonProps = {
+    accessibility: menuButtonBehavior,
+    align: 'start',
+    position: 'below',
+  }
+
+  static autoControlledProps = ['open']
+
+  static getAutoControlledStateFromProps(
+    props: MenuButtonProps,
+    state: MenuButtonState,
+  ): Partial<MenuButtonState> {
+    return {
+      menuId: getOrGenerateIdFromShorthand('menubutton-menu-', props.menu, state.menuId),
+      triggerId: getOrGenerateIdFromShorthand(
+        'menubutton-trigger-',
+        props.trigger,
+        state.triggerId,
+      ),
+    }
+  }
+
+  triggerRef = React.createRef<HTMLElement>()
+  menuRef = React.createRef<HTMLElement>()
+
+  actionHandlers = {
+    closeMenu: () => this.closeMenu(),
+    openAndFocusFirst: e => this.openAndFocus(e, 'first'),
+    openAndFocusLast: e => this.openAndFocus(e, 'last'),
+  }
+
+  closeMenu() {
+    this.trySetState({ open: false })
+  }
+
+  openAndFocus(e: React.KeyboardEvent, which: 'first' | 'last') {
+    const renderCallback = () => focusMenuItem(this.menuRef.current, which)
+    this.trySetState({ open: true }, renderCallback)
+    e.preventDefault()
+  }
+
+  handleOpenChange = (e, { open }: PopupProps) => {
+    _.invoke(this.props, 'onOpenChange', e, { ...this.props, open })
+    this.trySetState({ open })
+  }
+
+  handleMenuOverrides = (predefinedProps?: MenuProps) => ({
+    onItemClick: (e: React.SyntheticEvent, itemProps: MenuItemProps) => {
+      _.invoke(predefinedProps, 'onItemClick', e, itemProps)
+      if (!itemProps || !itemProps.menu) {
+        // do not close if clicked on item with submenu
+        this.trySetState({ open: false })
+      }
+    },
+  })
+
+  renderComponent({
+    ElementType,
+    classes,
+    unhandledProps,
+    accessibility,
+    styles,
+  }: RenderResultConfig<MenuButtonProps>): React.ReactNode {
+    const {
+      // MenuButton props:
+      contextMenu,
+      menu,
+      // Popup props:
+      accessibility: accessibilityProp,
+      align,
+      className,
+      defaultOpen,
+      mountDocument,
+      mountNode,
+      mouseLeaveDelay,
+      offset,
+      on,
+      onOpenChange,
+      open,
+      pointing,
+      position,
+      tabbableTrigger,
+      styles: stylesProp,
+      target,
+      trigger,
+      unstable_pinned,
+      variables,
+    } = this.props
+
+    const popupProps = {
+      accessibility: accessibilityProp,
+      align,
+      className,
+      defaultOpen,
+      mountDocument,
+      mountNode,
+      mouseLeaveDelay,
+      offset,
+      on,
+      onOpenChange,
+      open,
+      pointing,
+      position,
+      tabbableTrigger,
+      styles: stylesProp,
+      target,
+      trigger,
+      unstable_pinned,
+      variables,
+    }
+
+    const content = Menu.create(menu, {
+      defaultProps: {
+        ...accessibility.attributes.menu,
+        vertical: true,
+      },
+      overrideProps: this.handleMenuOverrides,
+    })
+
+    const overrideProps = {
+      open: this.state.open,
+      onOpenChange: this.handleOpenChange,
+      content: {
+        styles: styles.popupContent,
+        content: content && <Ref innerRef={this.menuRef}>{content}</Ref>,
+      },
+      unstable_pinned: true,
+      children: undefined, // force-reset `children` defined for `Popup` as it collides with the `trigger
+      ...(contextMenu
+        ? {
+            on: 'context',
+            trapFocus: true,
+            tabbableTrigger: false,
+          }
+        : {
+            accessibility: () => accessibility,
+            inline: true,
+            autoFocus: true,
+          }),
+    }
+
+    const popup = Popup.create(popupProps, { overrideProps })
+
+    if (contextMenu) {
+      return popup
+    }
+
+    return (
+      <ElementType
+        className={classes.root}
+        {...accessibility.attributes.root}
+        {...unhandledProps}
+        {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
+      >
+        <Ref innerRef={this.triggerRef}>{popup}</Ref>
+      </ElementType>
+    )
+  }
+}
+
+MenuButton.create = createShorthandFactory({ Component: MenuButton, mappedProp: 'menu' })
diff --git a/packages/react/src/components/MenuButton/focusUtils.ts b/packages/react/src/components/MenuButton/focusUtils.ts
new file mode 100644
index 000000000..078313d1f
--- /dev/null
+++ b/packages/react/src/components/MenuButton/focusUtils.ts
@@ -0,0 +1,14 @@
+import {
+  getFirstFocusable,
+  getLastFocusable,
+  focusAsync,
+} from '../../lib/accessibility/FocusZone/focusUtilities'
+
+export const focusMenuItem = (menuRef: HTMLElement, order: 'first' | 'last') => {
+  const element =
+    order === 'first'
+      ? getFirstFocusable(menuRef, menuRef.firstElementChild as HTMLElement, true)
+      : getLastFocusable(menuRef, menuRef.lastElementChild as HTMLElement, true)
+
+  focusAsync(element)
+}
diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx
index 9aae71744..ad8320f37 100644
--- a/packages/react/src/components/Popup/Popup.tsx
+++ b/packages/react/src/components/Popup/Popup.tsx
@@ -109,7 +109,7 @@ export interface PopupProps
   trigger?: JSX.Element
 
   /** Whether the trigger should be tabbable */
-  shouldTriggerBeTabbable?: boolean
+  tabbableTrigger?: boolean
 
   /** Ref for Popup content DOM node. */
   contentRef?: React.Ref<HTMLElement>
@@ -167,7 +167,7 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
     renderContent: PropTypes.func,
     target: PropTypes.any,
     trigger: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.any]),
-    shouldTriggerBeTabbable: PropTypes.bool,
+    tabbableTrigger: PropTypes.bool,
     unstable_pinned: PropTypes.bool,
     content: customPropTypes.shorthandAllowingChildren,
     contentRef: customPropTypes.ref,
@@ -183,7 +183,7 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
     position: 'above',
     on: 'click',
     mouseLeaveDelay: 500,
-    shouldTriggerBeTabbable: true,
+    tabbableTrigger: true,
   }
 
   static autoControlledProps = ['open']
diff --git a/packages/react/src/components/Popup/PopupContent.tsx b/packages/react/src/components/Popup/PopupContent.tsx
index b69e9a53a..bac478f36 100644
--- a/packages/react/src/components/Popup/PopupContent.tsx
+++ b/packages/react/src/components/Popup/PopupContent.tsx
@@ -26,6 +26,10 @@ import { PopperChildrenProps } from '../../lib/positioner'
 import { WithAsProp, ComponentEventHandler, withSafeTypeForAs } from '../../types'
 import Box from '../Box/Box'
 
+export interface PopupContentSlotClassNames {
+  content: string
+}
+
 export interface PopupContentProps
   extends UIComponentProps,
     ChildrenComponentProps,
@@ -68,6 +72,7 @@ class PopupContent extends UIComponent<WithAsProp<PopupContentProps>> {
 
   static displayName = 'PopupContent'
   static className = 'ui-popup__content'
+  static slotClassNames: PopupContentSlotClassNames
 
   static propTypes = {
     ...commonPropTypes.createCommon(),
@@ -117,6 +122,7 @@ class PopupContent extends UIComponent<WithAsProp<PopupContentProps>> {
           {},
           {
             defaultProps: {
+              className: PopupContent.slotClassNames.content,
               children: childrenExist(children) ? children : content,
               styles: styles.content,
             },
@@ -149,6 +155,10 @@ class PopupContent extends UIComponent<WithAsProp<PopupContentProps>> {
   }
 }
 
+PopupContent.slotClassNames = {
+  content: `${PopupContent.className}__content`,
+}
+
 PopupContent.create = createShorthandFactory({ Component: PopupContent, mappedProp: 'content' })
 
 /**
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 0715d8f68..833f15a6b 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -49,6 +49,9 @@ export { default as ChatMessage } from './components/Chat/ChatMessage'
 export * from './components/Checkbox/Checkbox'
 export { default as Checkbox } from './components/Checkbox/Checkbox'
 
+export * from './components/MenuButton/MenuButton'
+export { default as MenuButton } from './components/MenuButton/MenuButton'
+
 export * from './components/Divider/Divider'
 export { default as Divider } from './components/Divider/Divider'
 
@@ -211,6 +214,8 @@ export * from './lib/positioner/types'
 import {
   getFirstTabbable,
   getLastTabbable,
+  getFirstFocusable,
+  getLastFocusable,
   getNextElement,
   getPreviousElement,
   focusAsync,
@@ -219,6 +224,8 @@ import {
 export const FocusZoneUtilities = {
   getFirstTabbable,
   getLastTabbable,
+  getFirstFocusable,
+  getLastFocusable,
   getNextElement,
   getPreviousElement,
   focusAsync,
diff --git a/packages/react/src/lib/accessibility/Behaviors/MenuButton/menuButtonBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/MenuButton/menuButtonBehavior.ts
new file mode 100644
index 000000000..e112bbb34
--- /dev/null
+++ b/packages/react/src/lib/accessibility/Behaviors/MenuButton/menuButtonBehavior.ts
@@ -0,0 +1,73 @@
+import * as _ from 'lodash'
+import * as keyboardKey from 'keyboard-key'
+import { Accessibility } from '../../types'
+import popupBehavior, { PopupBehaviorProps } from '../Popup/popupBehavior'
+
+/**
+ * @description
+ * Implements ARIA [MenuButton](https://www.w3.org/TR/wai-aria-practices/#menubutton) design pattern.
+ *
+ * @specification
+ * Adds role='none'.
+ * Adds attribute 'aria-haspopup=true' to 'trigger' slot.
+ * Adds attribute 'tabIndex=-1' based on the property 'open' to 'trigger' slot.
+ * Adds attribute 'aria-controls=menu-id' based on the property 'menuId' to 'trigger' slot.
+ * Adds attribute 'aria-expanded=true' based on the property 'open' to 'trigger' slot.
+ * Adds attribute 'id=trigger-id' based on the property 'triggerId' to 'trigger' slot.
+ * Adds attribute 'id=menu-id' based on the property 'menuId' to 'menu' slot.
+ * Adds attribute 'aria-labelledby=trigger-id' based on the property 'triggerId' to 'menu' slot.
+ */
+const menuButtonBehavior: Accessibility<MenuButtonBehaviorProps> = props => {
+  const behavior = popupBehavior(props)
+  return _.merge(behavior, {
+    attributes: {
+      root: {
+        role: 'none',
+      },
+      trigger: {
+        'aria-controls': props.menuId,
+        'aria-expanded': props.open || undefined,
+        'aria-haspopup': 'true',
+        id: props.triggerId,
+        tabIndex: props.open ? -1 : undefined,
+      },
+
+      menu: {
+        'aria-labelledby': props.triggerId,
+        id: props.menuId,
+      },
+    },
+    keyActions: {
+      root: {
+        ...(props.open
+          ? {
+              closeMenu: {
+                keyCombinations: [
+                  { keyCode: keyboardKey.Tab, shiftKey: false },
+                  { keyCode: keyboardKey.Tab, shiftKey: true },
+                ],
+              },
+            }
+          : _.includes(props.on, 'click') && {
+              openAndFocusFirst: {
+                keyCombinations: [{ keyCode: keyboardKey.ArrowDown }],
+              },
+              openAndFocusLast: {
+                keyCombinations: [{ keyCode: keyboardKey.ArrowUp }],
+              },
+            }),
+      },
+    },
+  })
+}
+
+export interface MenuButtonBehaviorProps extends PopupBehaviorProps {
+  /** Defines ID of the menu element. */
+  menuId?: string
+  /** Defines ID of the trigger element. */
+  triggerId?: string
+  /** Defines whether popup is displayed. */
+  open?: boolean
+}
+
+export default menuButtonBehavior
diff --git a/packages/react/src/lib/accessibility/Behaviors/Popup/popupBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Popup/popupBehavior.ts
index 9511125c8..128959388 100644
--- a/packages/react/src/lib/accessibility/Behaviors/Popup/popupBehavior.ts
+++ b/packages/react/src/lib/accessibility/Behaviors/Popup/popupBehavior.ts
@@ -17,7 +17,7 @@ const popupBehavior: Accessibility<PopupBehaviorProps> = props => {
   return {
     attributes: {
       trigger: {
-        ...(props.shouldTriggerBeTabbable
+        ...(props.tabbableTrigger
           ? { tabIndex: getAriaAttributeFromProps('tabIndex', props, 0) }
           : undefined),
         'aria-disabled': props.disabled,
@@ -118,7 +118,7 @@ export type PopupBehaviorProps = {
     type?: string
   }
   /** Whether the trigger should be tabbable */
-  shouldTriggerBeTabbable?: boolean
+  tabbableTrigger?: boolean
   /** Whether the popup was opened by right click */
   isOpenedByRightClick?: boolean
 }
diff --git a/packages/react/src/lib/accessibility/index.ts b/packages/react/src/lib/accessibility/index.ts
index 28b5dae00..2e55b6e5e 100644
--- a/packages/react/src/lib/accessibility/index.ts
+++ b/packages/react/src/lib/accessibility/index.ts
@@ -58,3 +58,4 @@ export { default as checkboxBehavior } from './Behaviors/Checkbox/checkboxBehavi
 export { default as tooltipBehavior } from './Behaviors/Tooltip/tooltipBehavior'
 export { default as tooltipAsLabelBehavior } from './Behaviors/Tooltip/tooltipAsLabelBehavior'
 export { default as sliderBehavior } from './Behaviors/Slider/sliderBehavior'
+export { default as menuButtonBehavior } from './Behaviors/MenuButton/menuButtonBehavior'
diff --git a/packages/react/src/lib/getOrGenerateIdFromShorthand.ts b/packages/react/src/lib/getOrGenerateIdFromShorthand.ts
index 38b7bbbed..aae7861cf 100644
--- a/packages/react/src/lib/getOrGenerateIdFromShorthand.ts
+++ b/packages/react/src/lib/getOrGenerateIdFromShorthand.ts
@@ -11,15 +11,15 @@ const getOrGenerateIdFromShorthand = <P extends Record<string, any>>(
     return undefined
   }
 
-  if (React.isValidElement(value)) {
-    return (value as React.ReactElement<{ id?: string }>).props.id
-  }
+  let result: string
 
-  if (_.isPlainObject(value)) {
-    return (value as Record<string, any>).id
+  if (React.isValidElement(value)) {
+    result = (value as React.ReactElement<{ id?: string }>).props.id
+  } else if (_.isPlainObject(value)) {
+    result = (value as Record<string, any>).id
   }
 
-  return currentValue || _.uniqueId(prefix)
+  return result || currentValue || _.uniqueId(prefix)
 }
 
 export default getOrGenerateIdFromShorthand
diff --git a/packages/react/src/themes/teams/componentStyles.ts b/packages/react/src/themes/teams/componentStyles.ts
index 0a0e71d8d..05bd31bf0 100644
--- a/packages/react/src/themes/teams/componentStyles.ts
+++ b/packages/react/src/themes/teams/componentStyles.ts
@@ -53,6 +53,8 @@ export { default as Menu } from './components/Menu/menuStyles'
 export { default as MenuItem } from './components/Menu/menuItemStyles'
 export { default as MenuDivider } from './components/Menu/menuDividerStyles'
 
+export { default as MenuButton } from './components/MenuButton/menuButtonStyles'
+
 export { default as Popup } from './components/Popup/popupStyles'
 export { default as PopupContent } from './components/Popup/popupContentStyles'
 
diff --git a/packages/react/src/themes/teams/components/MenuButton/menuButtonStyles.ts b/packages/react/src/themes/teams/components/MenuButton/menuButtonStyles.ts
new file mode 100644
index 000000000..a71e7fc38
--- /dev/null
+++ b/packages/react/src/themes/teams/components/MenuButton/menuButtonStyles.ts
@@ -0,0 +1,16 @@
+import PopupContent from '../../../../components/Popup/PopupContent'
+
+const menuButtonStyles = {
+  root: () => ({
+    boxSizing: 'border-box',
+    display: 'inline-block',
+  }),
+  popupContent: () => ({
+    [`& .${PopupContent.slotClassNames.content}`]: {
+      padding: '0px',
+    },
+    borderWidth: '0px',
+  }),
+}
+
+export default menuButtonStyles
diff --git a/packages/react/test/specs/behaviors/behavior-test.tsx b/packages/react/test/specs/behaviors/behavior-test.tsx
index f374319a1..2b09c94c1 100644
--- a/packages/react/test/specs/behaviors/behavior-test.tsx
+++ b/packages/react/test/specs/behaviors/behavior-test.tsx
@@ -50,6 +50,7 @@ import {
   toolbarRadioGroupItemBehavior,
   tooltipBehavior,
   tooltipAsLabelBehavior,
+  menuButtonBehavior,
 } from 'src/lib/accessibility'
 import { TestHelper } from './testHelper'
 import definitions from './testDefinitions'
@@ -72,6 +73,7 @@ testHelper.addBehavior('loaderBehavior', loaderBehavior)
 testHelper.addBehavior('menuBehavior', menuBehavior)
 testHelper.addBehavior('menuItemBehavior', menuItemBehavior)
 testHelper.addBehavior('menuDividerBehavior', menuDividerBehavior)
+testHelper.addBehavior('menuButtonBehavior', menuButtonBehavior)
 testHelper.addBehavior('submenuBehavior', submenuBehavior)
 testHelper.addBehavior('popupBehavior', popupBehavior)
 testHelper.addBehavior('radioGroupBehavior', radioGroupBehavior)
diff --git a/packages/react/test/specs/behaviors/dialogBehavior-test.tsx b/packages/react/test/specs/behaviors/dialogBehavior-test.tsx
index 13417952e..f994f2f3e 100644
--- a/packages/react/test/specs/behaviors/dialogBehavior-test.tsx
+++ b/packages/react/test/specs/behaviors/dialogBehavior-test.tsx
@@ -3,20 +3,20 @@ import * as React from 'react'
 
 describe('DialogBehavior.ts', () => {
   test('adds tabIndex=0 to trigger if element is not tabbable and tabIndex attribute is not provided', () => {
-    const expectedResult = dialogBehavior({ trigger: <div />, shouldTriggerBeTabbable: true })
+    const expectedResult = dialogBehavior({ trigger: <div />, tabbableTrigger: true })
     expect(expectedResult.attributes.trigger.tabIndex).toEqual(0)
   })
 
   test('adds tabIndex attribute with value passed as prop', () => {
     const expectedResult = dialogBehavior({
       trigger: <div tabIndex={-1} />,
-      shouldTriggerBeTabbable: true,
+      tabbableTrigger: true,
     })
     expect(expectedResult.attributes.trigger.tabIndex).toEqual(-1)
   })
 
   test('does not add tabIndex if element is already tabbable', () => {
-    const expectedResult = dialogBehavior({ trigger: <button />, shouldTriggerBeTabbable: true })
+    const expectedResult = dialogBehavior({ trigger: <button />, tabbableTrigger: true })
     expect(expectedResult.attributes.trigger.tabIndex).toBeUndefined()
   })
 
diff --git a/packages/react/test/specs/behaviors/popupBehavior-test.tsx b/packages/react/test/specs/behaviors/popupBehavior-test.tsx
index c839341c9..4174691de 100644
--- a/packages/react/test/specs/behaviors/popupBehavior-test.tsx
+++ b/packages/react/test/specs/behaviors/popupBehavior-test.tsx
@@ -4,25 +4,25 @@ import * as React from 'react'
 
 describe('PopupBehavior.ts', () => {
   test('adds tabIndex=0 to trigger if element is not tabbable and tabIndex attribute is not provided', () => {
-    const expectedResult = popupBehavior({ trigger: <div />, shouldTriggerBeTabbable: true })
+    const expectedResult = popupBehavior({ trigger: <div />, tabbableTrigger: true })
     expect(expectedResult.attributes.trigger.tabIndex).toEqual(0)
   })
 
-  test('does not add tabIndex=0 to trigger if element is not tabbable and tabIndex attribute is not provided and shouldTriggerBeTabbable is false', () => {
-    const expectedResult = popupBehavior({ trigger: <div />, shouldTriggerBeTabbable: false })
+  test('does not add tabIndex=0 to trigger if element is not tabbable and tabIndex attribute is not provided and tabbableTrigger is false', () => {
+    const expectedResult = popupBehavior({ trigger: <div />, tabbableTrigger: false })
     expect(expectedResult.attributes.trigger.tabIndex).toBeUndefined()
   })
 
   test('adds tabIndex attribute with value passed as prop', () => {
     const expectedResult = popupBehavior({
       trigger: <div tabIndex={-1} />,
-      shouldTriggerBeTabbable: true,
+      tabbableTrigger: true,
     })
     expect(expectedResult.attributes.trigger.tabIndex).toEqual(-1)
   })
 
   test('does not add tabIndex if element is already tabbable', () => {
-    const expectedResult = popupBehavior({ trigger: <Button />, shouldTriggerBeTabbable: true })
+    const expectedResult = popupBehavior({ trigger: <Button />, tabbableTrigger: true })
     expect(expectedResult.attributes.trigger.tabIndex).toBeUndefined()
   })
 })
diff --git a/packages/react/test/specs/behaviors/testDefinitions.ts b/packages/react/test/specs/behaviors/testDefinitions.ts
index 95375dc0b..5cee9da0e 100644
--- a/packages/react/test/specs/behaviors/testDefinitions.ts
+++ b/packages/react/test/specs/behaviors/testDefinitions.ts
@@ -119,7 +119,7 @@ definitions.push({
     const expectedResult = parameters.behavior(property).attributes[elementWhereToBeAdded][
       attributeToBeAdded
     ]
-    expect(expectedResult).toEqual(
+    expect(testHelper.convertToMatchingTypeIfApplicable(expectedResult)).toEqual(
       testHelper.convertToMatchingTypeIfApplicable(propertyDependingOnValue),
     )
   },
diff --git a/packages/react/test/specs/components/MenuButton/MenuButton-test.tsx b/packages/react/test/specs/components/MenuButton/MenuButton-test.tsx
new file mode 100644
index 000000000..64046d94a
--- /dev/null
+++ b/packages/react/test/specs/components/MenuButton/MenuButton-test.tsx
@@ -0,0 +1,100 @@
+import * as React from 'react'
+
+import MenuButton from 'src/components/MenuButton/MenuButton'
+import { isConformant, handlesAccessibility } from 'test/specs/commonTests'
+import { mountWithProvider } from '../../../utils'
+
+const mockMenu = { items: ['1', '2', '3'] }
+
+describe('MenuButton', () => {
+  isConformant(MenuButton)
+
+  describe('accessibility', () => {
+    handlesAccessibility(MenuButton, {
+      defaultRootRole: 'none',
+    })
+
+    describe('onOpenChange', () => {
+      test('is called on click', () => {
+        const onOpenChange = jest.fn()
+
+        mountWithProvider(
+          <MenuButton trigger={<button />} menu={mockMenu} onOpenChange={onOpenChange} />,
+        )
+          .find('button')
+          .simulate('click')
+
+        expect(onOpenChange).toHaveBeenCalledTimes(1)
+        expect(onOpenChange.mock.calls[0][1]).toMatchObject({ open: true })
+      })
+
+      test('is called on click when controlled', () => {
+        const onOpenChange = jest.fn()
+
+        mountWithProvider(
+          <MenuButton
+            open={false}
+            trigger={<button />}
+            menu={mockMenu}
+            onOpenChange={onOpenChange}
+          />,
+        )
+          .find('button')
+          .simulate('click')
+
+        expect(onOpenChange).toHaveBeenCalledTimes(1)
+        expect(onOpenChange.mock.calls[0][1]).toMatchObject({ open: true })
+      })
+    })
+
+    describe('ID handling', () => {
+      test('trigger id is used', () => {
+        const menuButton = mountWithProvider(
+          <MenuButton trigger={<button id="test-id" />} menu={mockMenu} />,
+        )
+        const button = menuButton.find('button')
+        button.simulate('click')
+        const menu = menuButton.find('ul')
+        const triggerId = button.prop('id')
+
+        expect(triggerId).toEqual('test-id')
+        expect(menu.prop('aria-labelledby')).toEqual(triggerId)
+      })
+
+      test('trigger id is generated if not provided', () => {
+        const menuButton = mountWithProvider(<MenuButton trigger={<button />} menu={mockMenu} />)
+        const button = menuButton.find('button')
+        button.simulate('click')
+        const menu = menuButton.find('ul')
+        const triggerId = button.prop('id')
+
+        expect(triggerId).toMatch(/menubutton-trigger-\d+/)
+        expect(menu.prop('aria-labelledby')).toEqual(triggerId)
+      })
+
+      test('menu id is used', () => {
+        const menuButton = mountWithProvider(
+          <MenuButton trigger={<button />} menu={{ ...mockMenu, id: 'test-id' }} />,
+        )
+        const button = menuButton.find('button')
+        button.simulate('click')
+        const menu = menuButton.find('ul')
+        const menuId = menu.prop('id')
+
+        expect(menuId).toEqual('test-id')
+        expect(button.prop('aria-controls')).toEqual(menuId)
+      })
+
+      test('menu id is generated if not provided', () => {
+        const menuButton = mountWithProvider(<MenuButton trigger={<button />} menu={mockMenu} />)
+        const button = menuButton.find('button')
+        button.simulate('click')
+        const menu = menuButton.find('ul')
+        const menuId = menu.prop('id')
+
+        expect(menuId).toMatch(/menubutton-menu-\d+/)
+        expect(button.prop('aria-controls')).toEqual(menuId)
+      })
+    })
+  })
+})