diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js
index 606f96291e2..9dc0e5f0171 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js
@@ -26,7 +26,7 @@ const propTypes = {
   isOpen: PropTypes.bool,
   /** Display the toggle with no border or background */
   isPlain: PropTypes.bool,
-  /** Indicates where menu will be alligned horizontally */
+  /** Indicates where menu will be aligned horizontally */
   position: PropTypes.oneOf(Object.values(DropdownPosition)),
   /** Display menu above or below dropdown toggle */
   direction: PropTypes.oneOf(Object.values(DropdownDirection)),
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.d.ts b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.d.ts
new file mode 100644
index 00000000000..fcc17a3dfde
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.d.ts
@@ -0,0 +1,19 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+import { DropdownDirection, DropdownPosition } from '../Dropdown';
+import { OneOf } from '../../helpers';
+
+export interface OptionsMenuProps extends HTMLProps<HTMLDivElement> {
+  className?: string;
+  id: string;
+  menuItems: ReactNode[];
+  toggle: ReactNode;
+  isPlain?: boolean;
+  isOpen?: boolean;
+  ariaLabelMenu?: string;
+  position?: OneOf<typeof DropdownPosition, keyof typeof DropdownPosition>;
+  direction?: OneOf<typeof DropdownDirection, keyof typeof DropdownDirection>;
+}
+
+declare const OptionsMenu: FunctionComponent<OptionsMenuProps>;
+
+export default OptionsMenu;
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.js b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.js
new file mode 100644
index 00000000000..7efc19af701
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.js
@@ -0,0 +1,80 @@
+import React, { Children, cloneElement, Component } from 'react';
+import PropTypes from 'prop-types';
+import styles from '@patternfly/patternfly/components/OptionsMenu/options-menu.css';
+import { css, getModifier } from '@patternfly/react-styles';
+import { OptionsMenuDirection, OptionsMenuPosition } from './optionsMenuConstants';
+
+const propTypes = {
+  /** Classes applied to root element of the Options menu */
+  className: PropTypes.string,
+  /** Id of the root element of the Options menu */
+  id: PropTypes.string.isRequired,
+  /** Array of OptionsMenuItem and/or OptionMenuItemGroup nodes that will be rendered in the Options menu list */
+  menuItems: PropTypes.arrayOf(PropTypes.node).isRequired,
+  /** Either an OptionsMenuToggle or an OptionsMenuToggleWithText to use to toggle the Options menu */
+  toggle: PropTypes.node.isRequired,
+  /** Flag to indicate if menu is open */
+  isOpen: PropTypes.bool,
+  /** Flag to indicate the toggle has no border or background */
+  isPlain: PropTypes.bool,
+  /** Provides an accessible name for the Options menu */
+  ariaLabelMenu: PropTypes.string,
+  /** Display menu above or below Options menu toggle */
+  direction: PropTypes.oneOf(Object.values(OptionsMenuDirection)),
+  /** Indicates where menu will be aligned horizontally */
+  position: PropTypes.oneOf(Object.values(OptionsMenuPosition)),
+};
+
+const defaultProps = {
+  className: '',
+  isOpen: false,
+  isPlain: false,
+  ariaLabelMenu: '',
+  direction: OptionsMenuDirection.down,
+  position: OptionsMenuPosition.left,
+};
+
+class OptionsMenu extends Component {
+
+  render() {
+    const {
+      className,
+      direction,
+      position,
+      id,
+      isOpen,
+      isPlain,
+      ariaLabelMenu,
+      menuItems,
+      toggle } = this.props;
+    return (
+      <div id={id}
+        className={
+          css(styles.optionsMenu,
+            direction === OptionsMenuDirection.up && getModifier(styles, 'top'),
+            position === OptionsMenuPosition.right && getModifier(styles, 'align-right'),
+            isOpen && getModifier(styles, 'expanded'),
+            className)}>
+        {Children.map(toggle, oneToggle =>
+          cloneElement(oneToggle, {
+            parentId: id,
+            isOpen,
+            isPlain,
+          }))}
+        {isOpen &&
+        <ul className={css(styles.optionsMenuMenu,
+          position === OptionsMenuPosition.right && getModifier(styles, 'align-right'))}
+          {...ariaLabelMenu ? {'aria-label': ariaLabelMenu} : {'aria-labelledby': `${id}-toggle`}}>
+          {menuItems.map((item) => {
+            return item;
+          })}
+        </ul>}
+      </div>
+    )
+  }
+}
+
+OptionsMenu.propTypes = propTypes;
+OptionsMenu.defaultProps = defaultProps;
+
+export default OptionsMenu;
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.md b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.md
new file mode 100644
index 00000000000..26ceded5ced
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.md
@@ -0,0 +1,374 @@
+---
+title: "Options menu"
+cssPrefix: "pf-c-options-menu"
+---
+import React from 'react';
+import {
+  OptionsMenu,
+  OptionsMenuItem,
+  OptionsMenuToggle,
+  OptionsMenuItemGroup,
+  OptionsMenuDirection,
+  OptionsMenuPosition,
+  OptionsMenuSeparator,
+  OptionsMenuToggleWithText
+} from '@patternfly/react-core';
+import { CaretDownIcon, SortAmountDownIcon } from '@patternfly/react-icons';
+
+## Options menu - single option
+```js
+import React from 'react';
+import { OptionsMenu, OptionsMenuItem, OptionsMenuToggle } from '@patternfly/react-core';
+
+class SingleOption extends React.Component {
+  constructor(props) {
+      super(props);
+      this.state = {
+        isOpen: false,
+        toggleTemplateProps: {
+          text: "Options menu"
+        },
+        selectedOption: "singleOption1"
+      };
+
+      this.onToggle = () => {
+          this.setState({
+              isOpen: !this.state.isOpen
+          });
+      };
+      
+      this.onSelect = event => {
+        const id = event.target.id;
+        this.setState(() => {
+          return { selectedOption: id };
+        });
+      };
+
+      this.toggleTemplate = ({toggleTemplateProps}) => {
+        const { text } = toggleTemplateProps;
+        return <React.Fragment>{text}</React.Fragment>
+      };
+    }
+
+  render() {
+    const { isOpen, toggleTemplateProps } = this.state;
+    const menuItems = [
+      <OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.selectedOption === "singleOption1"} id="singleOption1" key="option 1">Option 1</OptionsMenuItem>,
+      <OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.selectedOption === "singleOption2"} id="singleOption2" key="option 2">Option 2</OptionsMenuItem>,
+      <OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.selectedOption === "singleOption3"} id="singleOption3" key="option 3">Option 3</OptionsMenuItem>
+    ];
+    const toggle = <OptionsMenuToggle onToggle={this.onToggle} toggleTemplate={this.toggleTemplate} toggleTemplateProps={toggleTemplateProps}/>
+
+    return (
+      <OptionsMenu 
+        id="options-menu-single-option-example" 
+        menuItems={menuItems} 
+        isOpen={isOpen} 
+        toggle={toggle}/>
+    );
+  }
+}
+```
+
+## Options menu - multiple options
+```js
+import React from 'react';
+import { OptionsMenu, OptionsMenuItem, OptionsMenuSeparator, OptionsMenuItemGroup, OptionsMenuToggle} from '@patternfly/react-core';
+
+class MultipleOptions extends React.Component {
+  constructor(props) {
+      super(props);
+      this.state = {
+        isOpen: false,
+        toggleTemplateProps: {
+          text: "Sort by"
+        },
+        sortColumn: "date",
+        sortDirection: "ascending"
+      };
+
+      this.onToggle = () => {
+          this.setState({
+              isOpen: !this.state.isOpen
+          });
+      };
+      
+      this.onSelectColumn = event => {
+        const id = event.target.id;
+        this.setState(() => {
+          return { sortColumn: id };
+        });
+      };
+      
+      this.onSelectDirection = event => {
+        const id = event.target.id;
+        this.setState(() => {
+          return { sortDirection: id };
+        });
+      };
+
+      this.toggleTemplate = ({toggleTemplateProps}) => {
+        const { text } = toggleTemplateProps;
+        return <React.Fragment>{text}</React.Fragment>
+      };
+    }
+
+  render() {
+    const { isOpen, toggleTemplateProps } = this.state;
+    const menuItems = [
+        <OptionsMenuItemGroup key="first group" aria-label="Sort Column">
+          <OptionsMenuItem onSelect={this.onSelectColumn} isSelected={this.state.sortColumn === "name"} id="name" key="name">Name</OptionsMenuItem>
+          <OptionsMenuItem onSelect={this.onSelectColumn} isSelected={this.state.sortColumn === "date"} id="date" key="date">Date</OptionsMenuItem>
+          <OptionsMenuItem isDisabled onSelect={this.onSelectColumn} isSelected={this.state.sortColumn === "disabled"} id="disabled" key="disabled">Disabled</OptionsMenuItem>
+          <OptionsMenuItem onSelect={this.onSelectColumn} isSelected={this.state.sortColumn === "size"} id="size" key="size">Size</OptionsMenuItem>
+        </OptionsMenuItemGroup>,
+        <OptionsMenuSeparator key="separator"/>,
+        <OptionsMenuItemGroup key="second group" aria-label="Sort Direction">
+          <OptionsMenuItem onSelect={this.onSelectDirection} isSelected={this.state.sortDirection === "ascending"} id="ascending" key="ascending">Ascending</OptionsMenuItem>
+          <OptionsMenuItem onSelect={this.onSelectDirection} isSelected={this.state.sortDirection === "descending"} id="descending" key="descending">Descending</OptionsMenuItem>
+        </OptionsMenuItemGroup>
+      ];
+    const toggle = <OptionsMenuToggle onToggle={this.onToggle} toggleTemplate={this.toggleTemplate} toggleTemplateProps={toggleTemplateProps}/>
+
+    return (
+      <OptionsMenu 
+        id="options-menu-multiple-options-example" 
+        menuItems={menuItems} 
+        isOpen={isOpen}
+        toggle={toggle} />
+    );
+  }
+}
+```
+
+## Options menu - plain
+```js
+import React from 'react';
+import { OptionsMenu, OptionsMenuItem, OptionsMenuToggle } from '@patternfly/react-core';
+import { SortAmountDownIcon } from '@patternfly/react-icons';
+
+class Plain extends React.Component {
+  constructor(props) {
+      super(props);
+      this.state = {
+        isOpen: false,
+        plainOption1: true,
+        plainOption2: false,
+        plainOption3: false
+      };
+
+      this.onToggle = () => {
+          this.setState({
+              isOpen: !this.state.isOpen
+          });
+      };
+      
+      this.onSelect = event => {
+        const id = event.target.id;
+        this.setState((prevState) => {
+          return { [id]: !prevState[id] };
+        });
+      };
+
+      this.toggleTemplate = () => {
+        return <React.Fragment>
+          <SortAmountDownIcon aria-hidden="true"/>
+        </React.Fragment>;
+      }
+    }
+
+  render() {
+    const { isOpen } = this.state;
+    const menuItems = [
+      <OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.plainOption1} id="plainOption1" key="option 1">Option 1</OptionsMenuItem>,
+      <OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.plainOption2} id="plainOption2" key="option 2">Option 2</OptionsMenuItem>,
+      <OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.plainOption3} id="plainOption3" key="option 3">Option 3</OptionsMenuItem>
+    ];
+    const toggle = <OptionsMenuToggle onToggle={this.onToggle} toggleTemplate={this.toggleTemplate} aria-label="Sort by" hideCaret/>
+
+    return (
+      <OptionsMenu id="options-menu-plain-example" 
+        isPlain
+        menuItems={menuItems}  
+        isOpen={isOpen}
+        toggle={toggle}/>
+    );
+  }
+}
+```
+
+## Options menu - top
+```js
+import React from 'react';
+import { OptionsMenu, OptionsMenuItem, OptionsMenuDirection, OptionsMenuToggle } from '@patternfly/react-core';
+
+class Top extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+      toggleTemplateProps: {
+        text: "Options menu"
+      },
+      topOption1: false,
+      topOption2: false,
+      topOption3: false
+    };
+
+    this.onToggle = () => {
+        this.setState({
+            isOpen: !this.state.isOpen
+        });
+    };
+    
+    this.onSelect = event => {
+      const id = event.target.id;
+      this.setState((prevState) => {
+        return { [id]: !prevState[id] };
+      });
+    };
+
+    this.toggleTemplate = ({toggleTemplateProps}) => {
+      const { text } = toggleTemplateProps;
+      return <React.Fragment>{text}</React.Fragment>
+    };
+  }
+
+  render() {
+    const { toggleTemplateProps, isOpen } = this.state;
+    const menuItems = [
+      <OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.topOption1} id="topOption1" key="option 1">Option 1</OptionsMenuItem>,
+      <OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.topOption2} id="topOption2" key="option 2">Option 2</OptionsMenuItem>,
+      <OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.topOption3} id="topOption3" key="option 3">Option 3</OptionsMenuItem>
+    ];
+    const toggle = <OptionsMenuToggle onToggle={this.onToggle} toggleTemplate={this.toggleTemplate} toggleTemplateProps={toggleTemplateProps}/>
+
+    return (
+      <OptionsMenu 
+        id="options-menu-top-example" 
+        direction={OptionsMenuDirection.up} 
+        menuItems={menuItems} 
+        toggle={toggle} 
+        isOpen={isOpen} />
+    );
+  }
+}
+```
+
+## Options menu - align right
+```js
+import React from 'react';
+import { OptionsMenu, OptionsMenuItem, OptionsMenuPosition, OptionsMenuToggle } from '@patternfly/react-core';
+
+class AlignRight extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+      toggleTemplateProps: {
+        text: "Align right"
+      },
+      rightOption1: true,
+      rightOption2: false,
+      rightOption3: false
+    };
+
+    this.onToggle = () => {
+        this.setState({
+            isOpen: !this.state.isOpen
+        });
+    };
+    
+    this.onSelect = event => {
+      const id = event.target.id;
+      this.setState((prevState) => {
+        return { [id]: !prevState[id] };
+      });
+    };
+
+    this.toggleTemplate = ({toggleTemplateProps}) => {
+      const { text } = toggleTemplateProps;
+      return <React.Fragment>{text}</React.Fragment>
+    };
+  }
+
+  render() {
+    const { toggleTemplateProps, isOpen } = this.state;
+    const menuItems = [
+      <OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.rightOption1} id="rightOption1" key="option 1">Right option 1</OptionsMenuItem>,
+      <OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.rightOption2} id="rightOption2" key="option 2">Right option 2</OptionsMenuItem>,
+      <OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.rightOption3} id="rightOption3" key="option 3">Right option 3</OptionsMenuItem>
+    ];
+    const toggle = <OptionsMenuToggle onToggle={this.onToggle} toggleTemplate={this.toggleTemplate} toggleTemplateProps={toggleTemplateProps}/>
+
+    return (
+      <OptionsMenu 
+        id="options-menu-align-right-example" 
+        position={OptionsMenuPosition.right} 
+        menuItems={menuItems} 
+        toggle={toggle} 
+        isOpen={isOpen} />
+    );
+  }
+}
+```
+
+## Options menu - plain with text
+```js
+import React from 'react';
+import { OptionsMenu, OptionsMenuItem, OptionsMenuToggleWithText } from '@patternfly/react-core';
+import { CaretDownIcon } from '@patternfly/react-icons';
+
+class PlainWithText extends React.Component {
+  constructor(props) {
+      super(props);
+      this.state = {
+        isOpen: false,
+        toggleText: <React.Fragment>Custom text</React.Fragment>,
+        buttonContents: <CaretDownIcon/>,
+        customOption1: true,
+        customOption2: false,
+        customOption3: false
+      };
+
+      this.onToggle = () => {
+          this.setState({
+              isOpen: !this.state.isOpen
+          });
+      };
+      
+      this.onSelect = event => {
+        const id = event.target.id;
+        this.setState((prevState) => {
+          return { [id]: !prevState[id] };
+        });
+      };
+
+      this.onToggle = () => {
+        this.setState({
+          isOpen: !this.state.isOpen
+        });
+      };
+    }
+
+  render() {
+    const { isOpen, toggleText, buttonContents } = this.state;
+    const menuItems = [
+      <OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.customOption1} id="customOption1" key="option 1">Option 1</OptionsMenuItem>,
+      <OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.customOption2} id="customOption2" key="option 2">Option 2</OptionsMenuItem>,
+      <OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.customOption3} id="customOption3" key="option 3">Option 3</OptionsMenuItem>
+    ];
+    const toggle = <OptionsMenuToggleWithText toggleText={toggleText} toggleButtonContents={buttonContents} onToggle={this.onToggle} />;
+
+    return (
+      <OptionsMenu 
+        id="options-menu-plain-with-text-example" 
+        menuItems={menuItems} 
+        isOpen={isOpen} 
+        isPlain
+        isText
+        toggle={toggle} />
+    );
+  }
+}
+```
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.test.js b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.test.js
new file mode 100644
index 00000000000..dfe31f4ed2c
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.test.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import OptionsMenu from './OptionsMenu';
+import OptionsMenuToggle from './OptionsMenuToggle';
+import OptionsMenuItemGroup from './OptionsMenuItemGroup';
+import OptionsMenuItem from './OptionsMenuItem';
+import OptionsMenuSeparator from './OptionsMenuSeparator';
+import { OptionsMenuDirection, OptionsMenuPosition } from './optionsMenuConstants';
+import OptionsMenuToggleWithText from './OptionsMenuToggleWithText';
+
+const menuItems = [
+  <OptionsMenuItemGroup key="first group">
+    <OptionsMenuItem key="name">Name</OptionsMenuItem>
+    <OptionsMenuItem key="date">Date</OptionsMenuItem>
+    <OptionsMenuItem isDisabled key="disabled">Disabled</OptionsMenuItem>
+    <OptionsMenuItem key="size">Size</OptionsMenuItem>
+  </OptionsMenuItemGroup>,
+  <OptionsMenuSeparator key="separator" />,
+  <OptionsMenuItemGroup key="second group">
+    <OptionsMenuItem key="ascending">Ascending</OptionsMenuItem>
+    <OptionsMenuItem key="descending">Descending</OptionsMenuItem>
+  </OptionsMenuItemGroup>
+];
+
+describe('optionsMenu', () => {
+  test('regular', () => {
+    const view = mount(
+      <OptionsMenu id='regular'
+         menuItems={menuItems}
+         toggle={<OptionsMenuToggle>Options Menu</OptionsMenuToggle>}
+      />
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('right aligned', () => {
+    const view = mount(
+      <OptionsMenu id='rightAligned'
+        menuItems={menuItems}
+        position={OptionsMenuPosition.right}
+          toggle={<OptionsMenuToggle>Options Menu</OptionsMenuToggle>}
+      />
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('open up', () => {
+    const view = mount(
+      <OptionsMenu id='openUp'
+        menuItems={menuItems}
+        direction={OptionsMenuDirection.up}
+        toggle={<OptionsMenuToggle>Options Menu</OptionsMenuToggle>}
+      />
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('right aligned + open up', () => {
+    const view = mount(
+      <OptionsMenu id='rightAlignedOpenUp'
+        menuItems={menuItems}
+        position={OptionsMenuPosition.right}
+        direction={OptionsMenuDirection.up}
+        toggle={<OptionsMenuToggle>Options Menu</OptionsMenuToggle>}
+      />
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('expanded', () => {
+    const view = mount(
+      <OptionsMenu id='expanded'
+        menuItems={menuItems}
+        isOpen
+        toggle={<OptionsMenuToggle>Options Menu</OptionsMenuToggle>}
+      />
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('plain', () => {
+    const view = mount(
+      <OptionsMenu id='plain'
+         menuItems={menuItems}
+         isPlain
+         toggle={<OptionsMenuToggle>Options Menu</OptionsMenuToggle>}
+      />
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('text', () => {
+    const view = mount(
+      <OptionsMenu id='text'
+         menuItems={menuItems}
+                   toggle={<OptionsMenuToggleWithText toggleButtonContents={<React.Fragment>Test</React.Fragment>} toggleText="Test" />}
+      />
+    );
+    expect(view).toMatchSnapshot();
+  });
+});
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItem.d.ts b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItem.d.ts
new file mode 100644
index 00000000000..f17888ba8c5
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItem.d.ts
@@ -0,0 +1,14 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+
+export interface OptionsMenuItemProps extends HTMLProps<HTMLDivElement> {
+  children?: ReactNode;
+  className?: string;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+  onSelect?(event: React.SyntheticEvent<HTMLDivElement>): void;
+  id?: string;
+}
+
+declare const OptionsMenuItem: FunctionComponent<OptionsMenuItemProps>;
+
+export default OptionsMenuItem;
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItem.js b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItem.js
new file mode 100644
index 00000000000..37e686d7e78
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItem.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css, getModifier } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly/components/OptionsMenu/options-menu.css';
+import { CheckIcon } from '@patternfly/react-icons';
+import { KEY_CODES } from '../../helpers';
+
+const propTypes = {
+  /** Anything which can be rendered as an Options menu item */
+  children: PropTypes.node,
+  /** Classes applied to root element of an Options menu item */
+  className: PropTypes.string,
+  /** Render Options menu item as selected */
+  isSelected: PropTypes.bool,
+  /** Render Options menu item as disabled option */
+  isDisabled: PropTypes.bool,
+  /** Callback for when this Options menu item is selected */
+  onSelect: PropTypes.func,
+  /** Unique id of this Options menu item */
+  id: PropTypes.string,
+};
+
+const defaultProps = {
+  children: null,
+  className: '',
+  isSelected: false,
+  isDisabled: false,
+  onSelect: Function.prototype,
+  id: '',
+};
+
+class OptionsMenuItem extends React.Component {
+
+  onKeyDown = event => {
+    // Detected key press on this item, notify the menu parent so that the appropriate
+    // item can be focused
+    if (event.keyCode === KEY_CODES.TAB) return;
+    event.preventDefault();
+    if (event.keyCode === KEY_CODES.ENTER) {
+      this.props.onSelect(event);
+    }
+  };
+
+  render() {
+    const { onSelect, isDisabled, isSelected, className, children, id, ...props } = this.props;
+    return <li>
+      <button
+        className={css(styles.optionsMenuMenuItem, isDisabled && getModifier(styles, 'disabled'), className)}
+        aria-disabled={isDisabled}
+        onClick={onSelect}
+        onKeyDown={this.onKeyDown}
+        aria-selected={isSelected}
+        id={id}
+        {...props}>
+        {children}
+        <i className={css(styles.optionsMenuMenuItemIcon)} aria-hidden={true} hidden={!isSelected}><CheckIcon/></i>
+      </button>
+    </li>
+  }
+}
+
+OptionsMenuItem.propTypes = propTypes;
+OptionsMenuItem.defaultProps = defaultProps;
+
+export default OptionsMenuItem;
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItemGroup.d.ts b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItemGroup.d.ts
new file mode 100644
index 00000000000..e1741b8249a
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItemGroup.d.ts
@@ -0,0 +1,11 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+
+export interface OptionsMenuItemGroupProps extends HTMLProps<HTMLDivElement> {
+  children?: ReactNode;
+  className?: string;
+  ariaLabel?: string;
+}
+
+declare const OptionsMenuItemGroup: FunctionComponent<OptionsMenuItemGroupProps>;
+
+export default OptionsMenuItemGroup;
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItemGroup.js b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItemGroup.js
new file mode 100644
index 00000000000..df0dbcea50e
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItemGroup.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const OptionsMenuItemsGroup = ({
+  children,
+  className,
+  ariaLabel,
+}) => (
+  <li>
+    <ul className={className} aria-label={ariaLabel}>
+      {children}
+    </ul>
+  </li>
+);
+
+OptionsMenuItemsGroup.propTypes = {
+  /** Content to be rendered in the Options menu items component */
+  children: PropTypes.node,
+  /** Classes applied to root element of the Options menu items group */
+  className: PropTypes.string,
+  /** Provides an accessible name for the Options menu items group */
+  ariaLabel: PropTypes.string,
+};
+
+OptionsMenuItemsGroup.defaultValues = {
+  children: null,
+  className: '',
+  ariaLabel: '',
+};
+
+export default OptionsMenuItemsGroup;
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuSeparator.d.ts b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuSeparator.d.ts
new file mode 100644
index 00000000000..de9de8a8ce0
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuSeparator.d.ts
@@ -0,0 +1,9 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+
+export interface OptionsMenuSeparatorProps extends HTMLProps<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+declare const OptionsMenuSeparator: FunctionComponent<OptionsMenuSeparatorProps>;
+
+export default OptionsMenuSeparator;
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuSeparator.js b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuSeparator.js
new file mode 100644
index 00000000000..e700849d7e9
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuSeparator.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly/components/OptionsMenu/options-menu.css';
+
+const OptionsMenuSeparator = ({ className, ...props}) => (
+  <li
+    className={css(styles.optionsMenuSeparator, className)}
+    role="separator"
+    {...props}
+  />
+);
+
+OptionsMenuSeparator.propTypes = {
+  /** Classes applied to root element of Options menu separator item */
+  className: PropTypes.string,
+};
+
+OptionsMenuSeparator.defaultProps = {
+  className: '',
+};
+
+export default OptionsMenuSeparator;
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggle.d.ts b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggle.d.ts
new file mode 100644
index 00000000000..7ffd14d4007
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggle.d.ts
@@ -0,0 +1,19 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+
+export interface OptionsMenuToggleButtonProps extends HTMLProps<HTMLDivElement> {
+  parentId?: string;
+  onToggle?: Function;
+  isOpen?: boolean;
+  isPlain?: boolean;
+  isFocused?: boolean;
+  isHovered?: boolean;
+  isActive?: boolean;
+  hideCaret?: boolean;
+  "aria-label"?: string;
+  toggleTemplate?: ReactNode;
+  toggleTemplateProps?: object;
+}
+
+declare const OptionsMenuToggleButton: FunctionComponent<OptionsMenuToggleButtonProps>;
+
+export default OptionsMenuToggleButton;
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggle.js b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggle.js
new file mode 100644
index 00000000000..6160e545151
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggle.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CaretDownIcon } from '@patternfly/react-icons';
+import styles from '@patternfly/patternfly/components/OptionsMenu/options-menu.css';
+import { css, getModifier } from '@patternfly/react-styles';
+import { fillTemplate } from '../../helpers/util';
+
+const OptionsMenuToggle = ({
+                             parentId,
+                             onToggle,
+                             isOpen,
+                             isPlain,
+                             isHovered,
+                             isActive,
+                             isFocused,
+                             hideCaret,
+                             "aria-label": ariaLabel,
+                             toggleTemplate: ToggleTemplate,
+                             toggleTemplateProps }) => {
+
+  const template = ToggleTemplate && typeof ToggleTemplate === 'string'
+    ? (fillTemplate(ToggleTemplate, toggleTemplateProps))
+    : (<ToggleTemplate toggleTemplateProps={toggleTemplateProps} />);
+
+  return <button
+    className={css(styles.optionsMenuToggle,
+      isPlain && getModifier(styles, 'plain'),
+      isHovered && getModifier(styles, 'hover'),
+      isActive && getModifier(styles, 'active'),
+      isFocused && getModifier(styles, 'focus')
+    )}
+    id={`${parentId}-toggle`}
+    aria-haspopup="listbox"
+    aria-label={ariaLabel}
+    aria-expanded={isOpen}
+    onClick={onToggle}
+  >
+    {ToggleTemplate && (!isPlain
+      ? <span className={css(styles.optionsMenuToggleText)}>{template}</span>
+      : <React.Fragment>{template}</React.Fragment>)}
+    {!hideCaret && <CaretDownIcon aria-hidden className={css(styles.optionsMenuToggleIcon)}/>}
+  </button>
+};
+
+OptionsMenuToggle.propTypes = {
+  /** Id of the parent Options menu component */
+  parentId: PropTypes.string,
+  /** Callback for when this Options menu is toggled */
+  onToggle: PropTypes.func,
+  /** Flag to indicate if menu is open */
+  isOpen: PropTypes.bool,
+  /** Flag to indicate if the button is plain */
+  isPlain: PropTypes.bool,
+  /** Forces display of the hover state of the Options menu */
+  isHovered: PropTypes.bool,
+  /** Forces display of the active state of the Options menu */
+  isActive:  PropTypes.bool,
+  /** Forces display of the hover state of the Options menu */
+  isFocused: PropTypes.bool,
+  /** Content to be rendered in the Options menu toggle button */
+  toggleTemplate: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /** Props to be passed to the Options menu toggle button template */
+  toggleTemplateProps: PropTypes.object,
+  /** hide the toggle caret */
+  hideCaret: PropTypes.bool,
+  /** Provides an accessible name for the button when an icon is used instead of text*/
+  "aria-label": PropTypes.string,
+};
+
+OptionsMenuToggle.defaultProps = {
+  parentId: '',
+  onToggle: Function.prototype,
+  isOpen: false,
+  isPlain: false,
+  isHovered: false,
+  isActive: false,
+  isFocused: false,
+  toggleTemplate: '',
+  toggleTemplateProps: undefined,
+  hideCaret: false,
+  "aria-label": 'Options menu',
+};
+
+export default OptionsMenuToggle;
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.d.ts b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.d.ts
new file mode 100644
index 00000000000..633e62f17f9
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.d.ts
@@ -0,0 +1,20 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+
+export interface OptionsMenuToggleWithTextProps extends HTMLProps<HTMLDivElement> {
+  parentId?: string;
+  toggleText: ReactNode;
+  toggleTextClassName?: string;
+  toggleButtonContents: ReactNode;
+  toggleButtonContentsClassName?: string;
+  onToggle?: Function;
+  isOpen?: boolean;
+  isPlain?: boolean;
+  isFocused?: boolean;
+  isHovered?: boolean;
+  isActive?: boolean;
+  "aria-label"?: string;
+}
+
+declare const OptionsMenuToggleWithText: FunctionComponent<OptionsMenuToggleWithTextProps>;
+
+export default OptionsMenuToggleWithText;
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.js b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.js
new file mode 100644
index 00000000000..c9eabb8afec
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css, getModifier } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly/components/OptionsMenu/options-menu.css';
+
+const OptionsMenuToggleWithText = ({
+                                     parentId,
+                                     toggleText,
+                                     toggleTextClassName,
+                                     toggleButtonContents,
+                                     toggleButtonContentsClassName,
+                                     onToggle,
+                                     isOpen,
+                                     isPlain,
+                                     isHovered,
+                                     isActive,
+                                     isFocused,
+                                     "aria-label": ariaLabel
+                                   }) => (
+  <div className={css(styles.optionsMenuToggle,
+    getModifier(styles, 'text'),
+    isPlain && getModifier(styles, 'plain'),
+    isHovered && getModifier(styles, 'hover'),
+    isActive && getModifier(styles, 'active'),
+    isFocused && getModifier(styles, 'focus'))}>
+    <span className={css(styles.optionsMenuToggleText, toggleTextClassName)}>{toggleText}</span>
+    <button className={css(styles.optionsMenuToggleButton, toggleButtonContentsClassName)}
+            id={`${parentId}-toggle`}
+            aria-haspopup="listbox"
+            aria-label={ariaLabel}
+            aria-expanded={isOpen}
+            onClick={onToggle}>
+      {toggleButtonContents}
+    </button>
+  </div>
+);
+
+OptionsMenuToggleWithText.propTypes = {
+  /** Id of the parent Options menu component */
+  parentId: PropTypes.string,
+  /** Content to be rendered inside the Options menu toggle as text or another non-interactive element*/
+  toggleText: PropTypes.node.isRequired,
+  /** classes to be added to the Options menu toggle text*/
+  toggleTextClassName: PropTypes.string,
+  /** Content to be rendered inside the Options menu toggle button */
+  toggleButtonContents: PropTypes.node.isRequired,
+  /** Classes to be added to the Options menu toggle button */
+  toggleButtonContentsClassName: PropTypes.string,
+  /** Callback for when this Options menu is toggled */
+  onToggle: PropTypes.func,
+  /** Flag to indicate if menu is open */
+  isOpen: PropTypes.bool,
+  /** Flag to indicate if the button is plain */
+  isPlain: PropTypes.bool,
+  /** Forces display of the hover state of the Options menu button */
+  isHovered: PropTypes.bool,
+  /** Forces display of the active state of the Options menu button */
+  isActive:  PropTypes.bool,
+  /** Forces display of the hover state of the Options menu button */
+  isFocused: PropTypes.bool,
+  /** Provides an accessible name for the button when an icon is used instead of text */
+  "aria-label": PropTypes.string,
+};
+
+OptionsMenuToggleWithText.defaultProps = {
+  parentId: '',
+  toggleTextClassName: '',
+  toggleButtonContentsClassName: '',
+  onToggle: Function.prototype,
+  isOpen: false,
+  isPlain: false,
+  isHovered: false,
+  isActive: false,
+  isFocused: false,
+  "aria-label": 'Options menu',
+};
+
+export default OptionsMenuToggleWithText;
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/__snapshots__/OptionsMenu.test.js.snap b/packages/patternfly-4/react-core/src/components/OptionsMenu/__snapshots__/OptionsMenu.test.js.snap
new file mode 100644
index 00000000000..ded2c5413ce
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/__snapshots__/OptionsMenu.test.js.snap
@@ -0,0 +1,1385 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`optionsMenu expanded 1`] = `
+<OptionsMenu
+  ariaLabelMenu=""
+  className=""
+  direction="down"
+  id="expanded"
+  isOpen={true}
+  isPlain={false}
+  menuItems={
+    Array [
+      <OptionsMenuItemsGroup>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Name
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Date
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={true}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Disabled
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Size
+        </OptionsMenuItem>
+      </OptionsMenuItemsGroup>,
+      <OptionsMenuSeparator
+        className=""
+      />,
+      <OptionsMenuItemsGroup>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Ascending
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Descending
+        </OptionsMenuItem>
+      </OptionsMenuItemsGroup>,
+    ]
+  }
+  position="left"
+  toggle={
+    <OptionsMenuToggle
+      aria-label="Options menu"
+      hideCaret={false}
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={false}
+      isPlain={false}
+      onToggle={[Function]}
+      parentId=""
+      toggleTemplate=""
+    >
+      Options Menu
+    </OptionsMenuToggle>
+  }
+>
+  <div
+    className="pf-c-options-menu pf-m-expanded"
+    id="expanded"
+  >
+    <OptionsMenuToggle
+      aria-label="Options menu"
+      hideCaret={false}
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={true}
+      isPlain={false}
+      key=".0"
+      onToggle={[Function]}
+      parentId="expanded"
+      toggleTemplate=""
+    >
+      <button
+        aria-expanded={true}
+        aria-haspopup="listbox"
+        aria-label="Options menu"
+        className="pf-c-options-menu__toggle"
+        id="expanded-toggle"
+        onClick={[Function]}
+      >
+        <CaretDownIcon
+          aria-hidden={true}
+          className="pf-c-options-menu__toggle-icon"
+          color="currentColor"
+          size="sm"
+          title={null}
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby={null}
+            className="pf-c-options-menu__toggle-icon"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style={
+              Object {
+                "verticalAlign": "-0.125em",
+              }
+            }
+            viewBox="0 0 320 512"
+            width="1em"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              transform=""
+            />
+          </svg>
+        </CaretDownIcon>
+      </button>
+    </OptionsMenuToggle>
+    <ul
+      aria-labelledby="expanded-toggle"
+      className="pf-c-options-menu__menu"
+    >
+      <OptionsMenuItemsGroup
+        key="first group"
+      >
+        <li>
+          <ul>
+            <OptionsMenuItem
+              className=""
+              id=""
+              isDisabled={false}
+              isSelected={false}
+              key="name"
+              onSelect={[Function]}
+            >
+              <li>
+                <button
+                  aria-disabled={false}
+                  aria-selected={false}
+                  className="pf-c-options-menu__menu-item"
+                  id=""
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                >
+                  Name
+                  <i
+                    aria-hidden={true}
+                    className="pf-c-options-menu__menu-item-icon"
+                    hidden={true}
+                  >
+                    <CheckIcon
+                      color="currentColor"
+                      size="sm"
+                      title={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        aria-labelledby={null}
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        style={
+                          Object {
+                            "verticalAlign": "-0.125em",
+                          }
+                        }
+                        viewBox="0 0 512 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                          transform=""
+                        />
+                      </svg>
+                    </CheckIcon>
+                  </i>
+                </button>
+              </li>
+            </OptionsMenuItem>
+            <OptionsMenuItem
+              className=""
+              id=""
+              isDisabled={false}
+              isSelected={false}
+              key="date"
+              onSelect={[Function]}
+            >
+              <li>
+                <button
+                  aria-disabled={false}
+                  aria-selected={false}
+                  className="pf-c-options-menu__menu-item"
+                  id=""
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                >
+                  Date
+                  <i
+                    aria-hidden={true}
+                    className="pf-c-options-menu__menu-item-icon"
+                    hidden={true}
+                  >
+                    <CheckIcon
+                      color="currentColor"
+                      size="sm"
+                      title={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        aria-labelledby={null}
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        style={
+                          Object {
+                            "verticalAlign": "-0.125em",
+                          }
+                        }
+                        viewBox="0 0 512 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                          transform=""
+                        />
+                      </svg>
+                    </CheckIcon>
+                  </i>
+                </button>
+              </li>
+            </OptionsMenuItem>
+            <OptionsMenuItem
+              className=""
+              id=""
+              isDisabled={true}
+              isSelected={false}
+              key="disabled"
+              onSelect={[Function]}
+            >
+              <li>
+                <button
+                  aria-disabled={true}
+                  aria-selected={false}
+                  className="pf-c-options-menu__menu-item pf-m-disabled"
+                  id=""
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                >
+                  Disabled
+                  <i
+                    aria-hidden={true}
+                    className="pf-c-options-menu__menu-item-icon"
+                    hidden={true}
+                  >
+                    <CheckIcon
+                      color="currentColor"
+                      size="sm"
+                      title={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        aria-labelledby={null}
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        style={
+                          Object {
+                            "verticalAlign": "-0.125em",
+                          }
+                        }
+                        viewBox="0 0 512 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                          transform=""
+                        />
+                      </svg>
+                    </CheckIcon>
+                  </i>
+                </button>
+              </li>
+            </OptionsMenuItem>
+            <OptionsMenuItem
+              className=""
+              id=""
+              isDisabled={false}
+              isSelected={false}
+              key="size"
+              onSelect={[Function]}
+            >
+              <li>
+                <button
+                  aria-disabled={false}
+                  aria-selected={false}
+                  className="pf-c-options-menu__menu-item"
+                  id=""
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                >
+                  Size
+                  <i
+                    aria-hidden={true}
+                    className="pf-c-options-menu__menu-item-icon"
+                    hidden={true}
+                  >
+                    <CheckIcon
+                      color="currentColor"
+                      size="sm"
+                      title={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        aria-labelledby={null}
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        style={
+                          Object {
+                            "verticalAlign": "-0.125em",
+                          }
+                        }
+                        viewBox="0 0 512 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                          transform=""
+                        />
+                      </svg>
+                    </CheckIcon>
+                  </i>
+                </button>
+              </li>
+            </OptionsMenuItem>
+          </ul>
+        </li>
+      </OptionsMenuItemsGroup>
+      <OptionsMenuSeparator
+        className=""
+        key="separator"
+      >
+        <li
+          className="pf-c-options-menu__separator"
+          role="separator"
+        />
+      </OptionsMenuSeparator>
+      <OptionsMenuItemsGroup
+        key="second group"
+      >
+        <li>
+          <ul>
+            <OptionsMenuItem
+              className=""
+              id=""
+              isDisabled={false}
+              isSelected={false}
+              key="ascending"
+              onSelect={[Function]}
+            >
+              <li>
+                <button
+                  aria-disabled={false}
+                  aria-selected={false}
+                  className="pf-c-options-menu__menu-item"
+                  id=""
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                >
+                  Ascending
+                  <i
+                    aria-hidden={true}
+                    className="pf-c-options-menu__menu-item-icon"
+                    hidden={true}
+                  >
+                    <CheckIcon
+                      color="currentColor"
+                      size="sm"
+                      title={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        aria-labelledby={null}
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        style={
+                          Object {
+                            "verticalAlign": "-0.125em",
+                          }
+                        }
+                        viewBox="0 0 512 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                          transform=""
+                        />
+                      </svg>
+                    </CheckIcon>
+                  </i>
+                </button>
+              </li>
+            </OptionsMenuItem>
+            <OptionsMenuItem
+              className=""
+              id=""
+              isDisabled={false}
+              isSelected={false}
+              key="descending"
+              onSelect={[Function]}
+            >
+              <li>
+                <button
+                  aria-disabled={false}
+                  aria-selected={false}
+                  className="pf-c-options-menu__menu-item"
+                  id=""
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                >
+                  Descending
+                  <i
+                    aria-hidden={true}
+                    className="pf-c-options-menu__menu-item-icon"
+                    hidden={true}
+                  >
+                    <CheckIcon
+                      color="currentColor"
+                      size="sm"
+                      title={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        aria-labelledby={null}
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        style={
+                          Object {
+                            "verticalAlign": "-0.125em",
+                          }
+                        }
+                        viewBox="0 0 512 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                          transform=""
+                        />
+                      </svg>
+                    </CheckIcon>
+                  </i>
+                </button>
+              </li>
+            </OptionsMenuItem>
+          </ul>
+        </li>
+      </OptionsMenuItemsGroup>
+    </ul>
+  </div>
+</OptionsMenu>
+`;
+
+exports[`optionsMenu open up 1`] = `
+<OptionsMenu
+  ariaLabelMenu=""
+  className=""
+  direction="up"
+  id="openUp"
+  isOpen={false}
+  isPlain={false}
+  menuItems={
+    Array [
+      <OptionsMenuItemsGroup>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Name
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Date
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={true}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Disabled
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Size
+        </OptionsMenuItem>
+      </OptionsMenuItemsGroup>,
+      <OptionsMenuSeparator
+        className=""
+      />,
+      <OptionsMenuItemsGroup>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Ascending
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Descending
+        </OptionsMenuItem>
+      </OptionsMenuItemsGroup>,
+    ]
+  }
+  position="left"
+  toggle={
+    <OptionsMenuToggle
+      aria-label="Options menu"
+      hideCaret={false}
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={false}
+      isPlain={false}
+      onToggle={[Function]}
+      parentId=""
+      toggleTemplate=""
+    >
+      Options Menu
+    </OptionsMenuToggle>
+  }
+>
+  <div
+    className="pf-c-options-menu pf-m-top"
+    id="openUp"
+  >
+    <OptionsMenuToggle
+      aria-label="Options menu"
+      hideCaret={false}
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={false}
+      isPlain={false}
+      key=".0"
+      onToggle={[Function]}
+      parentId="openUp"
+      toggleTemplate=""
+    >
+      <button
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        aria-label="Options menu"
+        className="pf-c-options-menu__toggle"
+        id="openUp-toggle"
+        onClick={[Function]}
+      >
+        <CaretDownIcon
+          aria-hidden={true}
+          className="pf-c-options-menu__toggle-icon"
+          color="currentColor"
+          size="sm"
+          title={null}
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby={null}
+            className="pf-c-options-menu__toggle-icon"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style={
+              Object {
+                "verticalAlign": "-0.125em",
+              }
+            }
+            viewBox="0 0 320 512"
+            width="1em"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              transform=""
+            />
+          </svg>
+        </CaretDownIcon>
+      </button>
+    </OptionsMenuToggle>
+  </div>
+</OptionsMenu>
+`;
+
+exports[`optionsMenu plain 1`] = `
+<OptionsMenu
+  ariaLabelMenu=""
+  className=""
+  direction="down"
+  id="plain"
+  isOpen={false}
+  isPlain={true}
+  menuItems={
+    Array [
+      <OptionsMenuItemsGroup>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Name
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Date
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={true}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Disabled
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Size
+        </OptionsMenuItem>
+      </OptionsMenuItemsGroup>,
+      <OptionsMenuSeparator
+        className=""
+      />,
+      <OptionsMenuItemsGroup>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Ascending
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Descending
+        </OptionsMenuItem>
+      </OptionsMenuItemsGroup>,
+    ]
+  }
+  position="left"
+  toggle={
+    <OptionsMenuToggle
+      aria-label="Options menu"
+      hideCaret={false}
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={false}
+      isPlain={false}
+      onToggle={[Function]}
+      parentId=""
+      toggleTemplate=""
+    >
+      Options Menu
+    </OptionsMenuToggle>
+  }
+>
+  <div
+    className="pf-c-options-menu"
+    id="plain"
+  >
+    <OptionsMenuToggle
+      aria-label="Options menu"
+      hideCaret={false}
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={false}
+      isPlain={true}
+      key=".0"
+      onToggle={[Function]}
+      parentId="plain"
+      toggleTemplate=""
+    >
+      <button
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        aria-label="Options menu"
+        className="pf-c-options-menu__toggle pf-m-plain"
+        id="plain-toggle"
+        onClick={[Function]}
+      >
+        <CaretDownIcon
+          aria-hidden={true}
+          className="pf-c-options-menu__toggle-icon"
+          color="currentColor"
+          size="sm"
+          title={null}
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby={null}
+            className="pf-c-options-menu__toggle-icon"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style={
+              Object {
+                "verticalAlign": "-0.125em",
+              }
+            }
+            viewBox="0 0 320 512"
+            width="1em"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              transform=""
+            />
+          </svg>
+        </CaretDownIcon>
+      </button>
+    </OptionsMenuToggle>
+  </div>
+</OptionsMenu>
+`;
+
+exports[`optionsMenu regular 1`] = `
+<OptionsMenu
+  ariaLabelMenu=""
+  className=""
+  direction="down"
+  id="regular"
+  isOpen={false}
+  isPlain={false}
+  menuItems={
+    Array [
+      <OptionsMenuItemsGroup>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Name
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Date
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={true}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Disabled
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Size
+        </OptionsMenuItem>
+      </OptionsMenuItemsGroup>,
+      <OptionsMenuSeparator
+        className=""
+      />,
+      <OptionsMenuItemsGroup>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Ascending
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Descending
+        </OptionsMenuItem>
+      </OptionsMenuItemsGroup>,
+    ]
+  }
+  position="left"
+  toggle={
+    <OptionsMenuToggle
+      aria-label="Options menu"
+      hideCaret={false}
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={false}
+      isPlain={false}
+      onToggle={[Function]}
+      parentId=""
+      toggleTemplate=""
+    >
+      Options Menu
+    </OptionsMenuToggle>
+  }
+>
+  <div
+    className="pf-c-options-menu"
+    id="regular"
+  >
+    <OptionsMenuToggle
+      aria-label="Options menu"
+      hideCaret={false}
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={false}
+      isPlain={false}
+      key=".0"
+      onToggle={[Function]}
+      parentId="regular"
+      toggleTemplate=""
+    >
+      <button
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        aria-label="Options menu"
+        className="pf-c-options-menu__toggle"
+        id="regular-toggle"
+        onClick={[Function]}
+      >
+        <CaretDownIcon
+          aria-hidden={true}
+          className="pf-c-options-menu__toggle-icon"
+          color="currentColor"
+          size="sm"
+          title={null}
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby={null}
+            className="pf-c-options-menu__toggle-icon"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style={
+              Object {
+                "verticalAlign": "-0.125em",
+              }
+            }
+            viewBox="0 0 320 512"
+            width="1em"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              transform=""
+            />
+          </svg>
+        </CaretDownIcon>
+      </button>
+    </OptionsMenuToggle>
+  </div>
+</OptionsMenu>
+`;
+
+exports[`optionsMenu right aligned + open up 1`] = `
+<OptionsMenu
+  ariaLabelMenu=""
+  className=""
+  direction="up"
+  id="rightAlignedOpenUp"
+  isOpen={false}
+  isPlain={false}
+  menuItems={
+    Array [
+      <OptionsMenuItemsGroup>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Name
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Date
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={true}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Disabled
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Size
+        </OptionsMenuItem>
+      </OptionsMenuItemsGroup>,
+      <OptionsMenuSeparator
+        className=""
+      />,
+      <OptionsMenuItemsGroup>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Ascending
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Descending
+        </OptionsMenuItem>
+      </OptionsMenuItemsGroup>,
+    ]
+  }
+  position="right"
+  toggle={
+    <OptionsMenuToggle
+      aria-label="Options menu"
+      hideCaret={false}
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={false}
+      isPlain={false}
+      onToggle={[Function]}
+      parentId=""
+      toggleTemplate=""
+    >
+      Options Menu
+    </OptionsMenuToggle>
+  }
+>
+  <div
+    className="pf-c-options-menu pf-m-top pf-m-align-right"
+    id="rightAlignedOpenUp"
+  >
+    <OptionsMenuToggle
+      aria-label="Options menu"
+      hideCaret={false}
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={false}
+      isPlain={false}
+      key=".0"
+      onToggle={[Function]}
+      parentId="rightAlignedOpenUp"
+      toggleTemplate=""
+    >
+      <button
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        aria-label="Options menu"
+        className="pf-c-options-menu__toggle"
+        id="rightAlignedOpenUp-toggle"
+        onClick={[Function]}
+      >
+        <CaretDownIcon
+          aria-hidden={true}
+          className="pf-c-options-menu__toggle-icon"
+          color="currentColor"
+          size="sm"
+          title={null}
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby={null}
+            className="pf-c-options-menu__toggle-icon"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style={
+              Object {
+                "verticalAlign": "-0.125em",
+              }
+            }
+            viewBox="0 0 320 512"
+            width="1em"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              transform=""
+            />
+          </svg>
+        </CaretDownIcon>
+      </button>
+    </OptionsMenuToggle>
+  </div>
+</OptionsMenu>
+`;
+
+exports[`optionsMenu right aligned 1`] = `
+<OptionsMenu
+  ariaLabelMenu=""
+  className=""
+  direction="down"
+  id="rightAligned"
+  isOpen={false}
+  isPlain={false}
+  menuItems={
+    Array [
+      <OptionsMenuItemsGroup>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Name
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Date
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={true}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Disabled
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Size
+        </OptionsMenuItem>
+      </OptionsMenuItemsGroup>,
+      <OptionsMenuSeparator
+        className=""
+      />,
+      <OptionsMenuItemsGroup>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Ascending
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Descending
+        </OptionsMenuItem>
+      </OptionsMenuItemsGroup>,
+    ]
+  }
+  position="right"
+  toggle={
+    <OptionsMenuToggle
+      aria-label="Options menu"
+      hideCaret={false}
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={false}
+      isPlain={false}
+      onToggle={[Function]}
+      parentId=""
+      toggleTemplate=""
+    >
+      Options Menu
+    </OptionsMenuToggle>
+  }
+>
+  <div
+    className="pf-c-options-menu pf-m-align-right"
+    id="rightAligned"
+  >
+    <OptionsMenuToggle
+      aria-label="Options menu"
+      hideCaret={false}
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={false}
+      isPlain={false}
+      key=".0"
+      onToggle={[Function]}
+      parentId="rightAligned"
+      toggleTemplate=""
+    >
+      <button
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        aria-label="Options menu"
+        className="pf-c-options-menu__toggle"
+        id="rightAligned-toggle"
+        onClick={[Function]}
+      >
+        <CaretDownIcon
+          aria-hidden={true}
+          className="pf-c-options-menu__toggle-icon"
+          color="currentColor"
+          size="sm"
+          title={null}
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby={null}
+            className="pf-c-options-menu__toggle-icon"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style={
+              Object {
+                "verticalAlign": "-0.125em",
+              }
+            }
+            viewBox="0 0 320 512"
+            width="1em"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              transform=""
+            />
+          </svg>
+        </CaretDownIcon>
+      </button>
+    </OptionsMenuToggle>
+  </div>
+</OptionsMenu>
+`;
+
+exports[`optionsMenu text 1`] = `
+<OptionsMenu
+  ariaLabelMenu=""
+  className=""
+  direction="down"
+  id="text"
+  isOpen={false}
+  isPlain={false}
+  menuItems={
+    Array [
+      <OptionsMenuItemsGroup>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Name
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Date
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={true}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Disabled
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Size
+        </OptionsMenuItem>
+      </OptionsMenuItemsGroup>,
+      <OptionsMenuSeparator
+        className=""
+      />,
+      <OptionsMenuItemsGroup>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Ascending
+        </OptionsMenuItem>
+        <OptionsMenuItem
+          className=""
+          id=""
+          isDisabled={false}
+          isSelected={false}
+          onSelect={[Function]}
+        >
+          Descending
+        </OptionsMenuItem>
+      </OptionsMenuItemsGroup>,
+    ]
+  }
+  position="left"
+  toggle={
+    <OptionsMenuToggleWithText
+      aria-label="Options menu"
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={false}
+      isPlain={false}
+      onToggle={[Function]}
+      parentId=""
+      toggleButtonContents={
+        <React.Fragment>
+          Test
+        </React.Fragment>
+      }
+      toggleButtonContentsClassName=""
+      toggleText="Test"
+      toggleTextClassName=""
+    />
+  }
+>
+  <div
+    className="pf-c-options-menu"
+    id="text"
+  >
+    <OptionsMenuToggleWithText
+      aria-label="Options menu"
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={false}
+      isPlain={false}
+      key=".0"
+      onToggle={[Function]}
+      parentId="text"
+      toggleButtonContents={
+        <React.Fragment>
+          Test
+        </React.Fragment>
+      }
+      toggleButtonContentsClassName=""
+      toggleText="Test"
+      toggleTextClassName=""
+    >
+      <div
+        className="pf-c-options-menu__toggle pf-m-text"
+      >
+        <span
+          className="pf-c-options-menu__toggle-text"
+        >
+          Test
+        </span>
+        <button
+          aria-expanded={false}
+          aria-haspopup="listbox"
+          aria-label="Options menu"
+          className="pf-c-options-menu__toggle-button"
+          id="text-toggle"
+          onClick={[Function]}
+        >
+          Test
+        </button>
+      </div>
+    </OptionsMenuToggleWithText>
+  </div>
+</OptionsMenu>
+`;
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/index.d.ts b/packages/patternfly-4/react-core/src/components/OptionsMenu/index.d.ts
new file mode 100644
index 00000000000..1fa818f2b4e
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/index.d.ts
@@ -0,0 +1,7 @@
+export { default as OptionsMenu } from './OptionsMenu';
+export { default as OptionsMenuItem } from './OptionsMenuItem';
+export { default as OptionsMenuItemGroup } from './OptionsMenuItemGroup';
+export { default as OptionsMenuSeparator } from './OptionsMenuSeparator';
+export { default as OptionsMenuToggle } from './OptionsMenuToggle';
+export { default as OptionsMenuToggleWithText } from './OptionsMenuToggleWithText';
+export { OptionsMenuDirection, OptionsMenuPosition } from './optionsMenuConstants';
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/index.js b/packages/patternfly-4/react-core/src/components/OptionsMenu/index.js
new file mode 100644
index 00000000000..8666324b692
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/index.js
@@ -0,0 +1,9 @@
+export { default as OptionsMenu } from './OptionsMenu';
+export { default as OptionsMenuItem } from './OptionsMenuItem';
+export { default as OptionsMenuItemGroup } from './OptionsMenuItemGroup';
+export { default as OptionsMenuSeparator } from './OptionsMenuSeparator';
+export { default as OptionsMenuToggle } from './OptionsMenuToggle';
+export { default as OptionsMenuToggleWithText } from './OptionsMenuToggleWithText';
+export { OptionsMenuDirection, OptionsMenuPosition } from './optionsMenuConstants';
+
+
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/optionsMenuConstants.d.ts b/packages/patternfly-4/react-core/src/components/OptionsMenu/optionsMenuConstants.d.ts
new file mode 100644
index 00000000000..26fad95880e
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/optionsMenuConstants.d.ts
@@ -0,0 +1,9 @@
+export const OptionsMenuPosition: {
+  right: 'right';
+  left: 'left';
+};
+
+export const OptionsMenuDirection: {
+  up: 'up';
+  down: 'down';
+};
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/optionsMenuConstants.js b/packages/patternfly-4/react-core/src/components/OptionsMenu/optionsMenuConstants.js
new file mode 100644
index 00000000000..6234cdcbfc3
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/optionsMenuConstants.js
@@ -0,0 +1,9 @@
+export const OptionsMenuPosition = {
+  right: 'right',
+  left: 'left'
+};
+
+export const OptionsMenuDirection = {
+  up: 'up',
+  down: 'down'
+};
diff --git a/packages/patternfly-4/react-core/src/components/Pagination/Pagination.js b/packages/patternfly-4/react-core/src/components/Pagination/Pagination.js
index 30d50e5d876..0d6e83ff9c0 100644
--- a/packages/patternfly-4/react-core/src/components/Pagination/Pagination.js
+++ b/packages/patternfly-4/react-core/src/components/Pagination/Pagination.js
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import styles from '@patternfly/patternfly/components/Pagination/pagination.css';
 import { css } from '@patternfly/react-styles';
 import { DropdownDirection } from '../Dropdown';
-import ToggleTamplate from './ToggleTemplate';
+import ToggleTemplate from './ToggleTemplate';
 import Navigation from './Navigation';
-import OptionsMenu from './OptionsMenu';
+import PaginationOptionsMenu from './PaginationOptionsMenu';
 
 const perPageOptions = [
   {
@@ -107,7 +107,7 @@ const defaultProps = {
   perPageOptions,
   dropDirection: DropdownDirection.down,
   widgetId: 'pagination-options-menu',
-  toggleTemplate: ToggleTamplate,
+  toggleTemplate: ToggleTemplate,
   onSetPage: () => undefined,
   onPerPageSelect: () => undefined,
   onFirstClick: () => undefined,
@@ -155,7 +155,7 @@ const Pagination = ({
           {`${itemCount} ${titles.items}`}
         </div>
       }
-      <OptionsMenu
+      <PaginationOptionsMenu
         itemsPerPageTitle={titles.itemsPerPage}
         perPageSuffix={titles.perPageSuffix}
         itemsTitle={titles.items}
diff --git a/packages/patternfly-4/react-core/src/components/Pagination/OptionsMenu.js b/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js
similarity index 95%
rename from packages/patternfly-4/react-core/src/components/Pagination/OptionsMenu.js
rename to packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js
index 5c73804c6e2..d2e05309e05 100644
--- a/packages/patternfly-4/react-core/src/components/Pagination/OptionsMenu.js
+++ b/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js
@@ -41,7 +41,7 @@ const defaultProps = {
   )
 };
 
-class OptionsMenu extends Component {
+class PaginationOptionsMenu extends Component {
   state = {
     isOpen: false
   }
@@ -122,7 +122,7 @@ class OptionsMenu extends Component {
   }
 }
 
-OptionsMenu.propTypes = propTypes;
-OptionsMenu.defaultProps = defaultProps;
+PaginationOptionsMenu.propTypes = propTypes;
+PaginationOptionsMenu.defaultProps = defaultProps;
 
-export default OptionsMenu;
+export default PaginationOptionsMenu;
diff --git a/packages/patternfly-4/react-core/src/components/Pagination/ToggleTemplate.js b/packages/patternfly-4/react-core/src/components/Pagination/ToggleTemplate.js
index 2c9d9eda782..37a44d3d5f8 100644
--- a/packages/patternfly-4/react-core/src/components/Pagination/ToggleTemplate.js
+++ b/packages/patternfly-4/react-core/src/components/Pagination/ToggleTemplate.js
@@ -14,13 +14,13 @@ const defaultProps = {
   itemsTitle: 'items'
 };
 
-const ToggleTamplate = ({ firstIndex, lastIndex, itemCount, itemsTitle }) => (
+const ToggleTemplate = ({ firstIndex, lastIndex, itemCount, itemsTitle }) => (
   <Fragment>
     <strong>{firstIndex} - {lastIndex}</strong> of <strong>{itemCount}</strong> {itemsTitle}
   </Fragment>
 );
 
-ToggleTamplate.propTypes = propTypes;
-ToggleTamplate.defaultProps = defaultProps;
+ToggleTemplate.propTypes = propTypes;
+ToggleTemplate.defaultProps = defaultProps;
 
-export default ToggleTamplate;
+export default ToggleTemplate;
diff --git a/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap b/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap
index dc40721a4df..46856f0a072 100644
--- a/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap
@@ -60,7 +60,7 @@ exports[`component render custom pagination toggle 1`] = `
     >
       40 items
     </div>
-    <OptionsMenu
+    <PaginationOptionsMenu
       dropDirection="down"
       firstIndex={1}
       itemCount={40}
@@ -270,7 +270,7 @@ exports[`component render custom pagination toggle 1`] = `
           </div>
         </Dropdown>
       </div>
-    </OptionsMenu>
+    </PaginationOptionsMenu>
     <Navigation
       currPage="Current page"
       lastPage={4}
@@ -575,7 +575,7 @@ exports[`component render custom perPageOptions 1`] = `
     >
       40 items
     </div>
-    <OptionsMenu
+    <PaginationOptionsMenu
       dropDirection="down"
       firstIndex={1}
       itemCount={40}
@@ -673,7 +673,7 @@ exports[`component render custom perPageOptions 1`] = `
                 <span
                   className="pf-c-options-menu__toggle-text"
                 >
-                  <ToggleTamplate
+                  <ToggleTemplate
                     firstIndex={1}
                     itemCount={40}
                     itemsTitle="items"
@@ -690,7 +690,7 @@ exports[`component render custom perPageOptions 1`] = `
                     </strong>
                      
                     items
-                  </ToggleTamplate>
+                  </ToggleTemplate>
                 </span>
                 <button
                   aria-expanded={false}
@@ -733,7 +733,7 @@ exports[`component render custom perPageOptions 1`] = `
           </div>
         </Dropdown>
       </div>
-    </OptionsMenu>
+    </PaginationOptionsMenu>
     <Navigation
       currPage="Current page"
       lastPage={4}
@@ -1052,7 +1052,7 @@ exports[`component render custom start end 1`] = `
     >
       40 items
     </div>
-    <OptionsMenu
+    <PaginationOptionsMenu
       dropDirection="down"
       firstIndex={5}
       itemCount={40}
@@ -1219,7 +1219,7 @@ exports[`component render custom start end 1`] = `
                 <span
                   className="pf-c-options-menu__toggle-text"
                 >
-                  <ToggleTamplate
+                  <ToggleTemplate
                     firstIndex={5}
                     itemCount={40}
                     itemsTitle="items"
@@ -1236,7 +1236,7 @@ exports[`component render custom start end 1`] = `
                     </strong>
                      
                     items
-                  </ToggleTamplate>
+                  </ToggleTemplate>
                 </span>
                 <button
                   aria-expanded={false}
@@ -1279,7 +1279,7 @@ exports[`component render custom start end 1`] = `
           </div>
         </Dropdown>
       </div>
-    </OptionsMenu>
+    </PaginationOptionsMenu>
     <Navigation
       currPage="Current page"
       lastPage={4}
@@ -1596,7 +1596,7 @@ exports[`component render last page 1`] = `
     >
       20 items
     </div>
-    <OptionsMenu
+    <PaginationOptionsMenu
       dropDirection="down"
       firstIndex={11}
       itemCount={20}
@@ -1763,7 +1763,7 @@ exports[`component render last page 1`] = `
                 <span
                   className="pf-c-options-menu__toggle-text"
                 >
-                  <ToggleTamplate
+                  <ToggleTemplate
                     firstIndex={11}
                     itemCount={20}
                     itemsTitle="items"
@@ -1780,7 +1780,7 @@ exports[`component render last page 1`] = `
                     </strong>
                      
                     items
-                  </ToggleTamplate>
+                  </ToggleTemplate>
                 </span>
                 <button
                   aria-expanded={false}
@@ -1823,7 +1823,7 @@ exports[`component render last page 1`] = `
           </div>
         </Dropdown>
       </div>
-    </OptionsMenu>
+    </PaginationOptionsMenu>
     <Navigation
       currPage="Current page"
       lastPage={2}
@@ -2140,7 +2140,7 @@ exports[`component render limited number of pages 1`] = `
     >
       20 items
     </div>
-    <OptionsMenu
+    <PaginationOptionsMenu
       dropDirection="down"
       firstIndex={1}
       itemCount={20}
@@ -2307,7 +2307,7 @@ exports[`component render limited number of pages 1`] = `
                 <span
                   className="pf-c-options-menu__toggle-text"
                 >
-                  <ToggleTamplate
+                  <ToggleTemplate
                     firstIndex={1}
                     itemCount={20}
                     itemsTitle="items"
@@ -2324,7 +2324,7 @@ exports[`component render limited number of pages 1`] = `
                     </strong>
                      
                     items
-                  </ToggleTamplate>
+                  </ToggleTemplate>
                 </span>
                 <button
                   aria-expanded={false}
@@ -2367,7 +2367,7 @@ exports[`component render limited number of pages 1`] = `
           </div>
         </Dropdown>
       </div>
-    </OptionsMenu>
+    </PaginationOptionsMenu>
     <Navigation
       currPage="Current page"
       lastPage={1}
@@ -2684,7 +2684,7 @@ exports[`component render no items 1`] = `
     >
       0 items
     </div>
-    <OptionsMenu
+    <PaginationOptionsMenu
       dropDirection="down"
       firstIndex={0}
       itemCount={0}
@@ -2851,7 +2851,7 @@ exports[`component render no items 1`] = `
                 <span
                   className="pf-c-options-menu__toggle-text"
                 >
-                  <ToggleTamplate
+                  <ToggleTemplate
                     firstIndex={0}
                     itemCount={0}
                     itemsTitle="items"
@@ -2868,7 +2868,7 @@ exports[`component render no items 1`] = `
                     </strong>
                      
                     items
-                  </ToggleTamplate>
+                  </ToggleTemplate>
                 </span>
                 <button
                   aria-expanded={false}
@@ -2911,7 +2911,7 @@ exports[`component render no items 1`] = `
           </div>
         </Dropdown>
       </div>
-    </OptionsMenu>
+    </PaginationOptionsMenu>
     <Navigation
       currPage="Current page"
       lastPage={0}
@@ -3223,7 +3223,7 @@ exports[`component render should render correctly bottom 1`] = `
   <div
     className="pf-c-pagination pf-m-footer"
   >
-    <OptionsMenu
+    <PaginationOptionsMenu
       dropDirection="down"
       firstIndex={1}
       itemCount={20}
@@ -3390,7 +3390,7 @@ exports[`component render should render correctly bottom 1`] = `
                 <span
                   className="pf-c-options-menu__toggle-text"
                 >
-                  <ToggleTamplate
+                  <ToggleTemplate
                     firstIndex={1}
                     itemCount={20}
                     itemsTitle="items"
@@ -3407,7 +3407,7 @@ exports[`component render should render correctly bottom 1`] = `
                     </strong>
                      
                     items
-                  </ToggleTamplate>
+                  </ToggleTemplate>
                 </span>
                 <button
                   aria-expanded={false}
@@ -3450,7 +3450,7 @@ exports[`component render should render correctly bottom 1`] = `
           </div>
         </Dropdown>
       </div>
-    </OptionsMenu>
+    </PaginationOptionsMenu>
     <Navigation
       currPage="Current page"
       lastPage={2}
@@ -3767,7 +3767,7 @@ exports[`component render should render correctly top 1`] = `
     >
       20 items
     </div>
-    <OptionsMenu
+    <PaginationOptionsMenu
       dropDirection="down"
       firstIndex={1}
       itemCount={20}
@@ -3934,7 +3934,7 @@ exports[`component render should render correctly top 1`] = `
                 <span
                   className="pf-c-options-menu__toggle-text"
                 >
-                  <ToggleTamplate
+                  <ToggleTemplate
                     firstIndex={1}
                     itemCount={20}
                     itemsTitle="items"
@@ -3951,7 +3951,7 @@ exports[`component render should render correctly top 1`] = `
                     </strong>
                      
                     items
-                  </ToggleTamplate>
+                  </ToggleTemplate>
                 </span>
                 <button
                   aria-expanded={false}
@@ -3994,7 +3994,7 @@ exports[`component render should render correctly top 1`] = `
           </div>
         </Dropdown>
       </div>
-    </OptionsMenu>
+    </PaginationOptionsMenu>
     <Navigation
       currPage="Current page"
       lastPage={2}
@@ -4302,7 +4302,7 @@ exports[`component render titles 1`] = `
     >
       40 values
     </div>
-    <OptionsMenu
+    <PaginationOptionsMenu
       dropDirection="down"
       firstIndex={1}
       itemCount={40}
@@ -4469,7 +4469,7 @@ exports[`component render titles 1`] = `
                 <span
                   className="pf-c-options-menu__toggle-text"
                 >
-                  <ToggleTamplate
+                  <ToggleTemplate
                     firstIndex={1}
                     itemCount={40}
                     itemsTitle="values"
@@ -4486,7 +4486,7 @@ exports[`component render titles 1`] = `
                     </strong>
                      
                     values
-                  </ToggleTamplate>
+                  </ToggleTemplate>
                 </span>
                 <button
                   aria-expanded={false}
@@ -4529,7 +4529,7 @@ exports[`component render titles 1`] = `
           </div>
         </Dropdown>
       </div>
-    </OptionsMenu>
+    </PaginationOptionsMenu>
     <Navigation
       currPage="Current page"
       lastPage={4}
@@ -4846,7 +4846,7 @@ exports[`component render up drop direction 1`] = `
     >
       40 items
     </div>
-    <OptionsMenu
+    <PaginationOptionsMenu
       dropDirection="up"
       firstIndex={1}
       itemCount={40}
@@ -5013,7 +5013,7 @@ exports[`component render up drop direction 1`] = `
                 <span
                   className="pf-c-options-menu__toggle-text"
                 >
-                  <ToggleTamplate
+                  <ToggleTemplate
                     firstIndex={1}
                     itemCount={40}
                     itemsTitle="items"
@@ -5030,7 +5030,7 @@ exports[`component render up drop direction 1`] = `
                     </strong>
                      
                     items
-                  </ToggleTamplate>
+                  </ToggleTemplate>
                 </span>
                 <button
                   aria-expanded={false}
@@ -5073,7 +5073,7 @@ exports[`component render up drop direction 1`] = `
           </div>
         </Dropdown>
       </div>
-    </OptionsMenu>
+    </PaginationOptionsMenu>
     <Navigation
       currPage="Current page"
       lastPage={4}
diff --git a/packages/patternfly-4/react-core/src/components/index.ts b/packages/patternfly-4/react-core/src/components/index.ts
index 2f6c23d21b8..dc6cf37fa7c 100644
--- a/packages/patternfly-4/react-core/src/components/index.ts
+++ b/packages/patternfly-4/react-core/src/components/index.ts
@@ -27,6 +27,7 @@ export * from './List';
 export * from './LoginPage';
 export * from './Modal';
 export * from './Nav';
+export * from './OptionsMenu';
 export * from './Page';
 export * from './Pagination';
 export * from './Popover';
diff --git a/packages/patternfly-4/react-core/src/helpers/util.ts b/packages/patternfly-4/react-core/src/helpers/util.ts
index fc98db133b6..a285c54f8c2 100644
--- a/packages/patternfly-4/react-core/src/helpers/util.ts
+++ b/packages/patternfly-4/react-core/src/helpers/util.ts
@@ -92,7 +92,7 @@ export function sideElementIsOutOfView(container: HTMLElement, element: HTMLElem
  *
  * @return {type} The template string literal result
  */
-export function fillTemplate(templateString: string, templateVars: any) {
+export function fillTemplate(templateString: Function | string, templateVars: any) {
   const func = new Function(...Object.keys(templateVars), `return \`${templateString}\`;`);
   return func(...Object.values(templateVars));
 }