office-ui-fabric-react/lib/codepen/components/ContextualMenu/ContextualMenu.Basic.Example.Codepen.txt

Reusable React components for building experiences for Office 365.

let { ContextualMenuItemType, DefaultButton, Fabric } = window.Fabric;

class ContextualMenuBasicExample extends React.Component {
  constructor(props: {}) {
    super(props);
    this.state = {
      showCallout: false
    };
  }

  public render(): JSX.Element {
    return (
      <div>
        <DefaultButton
          id="ContextualMenuButton1"
          text="Click for ContextualMenu"
          menuProps={{
            shouldFocusOnMount: true,
            items: [
              {
                key: 'newItem',
                text: 'New',
                onClick: () => console.log('New clicked')
              },
              {
                key: 'divider_1',
                itemType: ContextualMenuItemType.Divider
              },
              {
                key: 'rename',
                text: 'Rename',
                onClick: () => console.log('Rename clicked')
              },
              {
                key: 'edit',
                text: 'Edit',
                onClick: () => console.log('Edit clicked')
              },
              {
                key: 'properties',
                text: 'Properties',
                onClick: () => console.log('Properties clicked')
              },
              {
                key: 'linkNoTarget',
                text: 'Link same window',
                href: 'http://bing.com'
              },
              {
                key: 'linkWithTarget',
                text: 'Link new window',
                href: 'http://bing.com',
                target: '_blank'
              },
              {
                key: 'linkWithOnClick',
                name: 'Link click',
                href: 'http://bing.com',
                onClick: (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {
                  alert('Link clicked');
                  ev.preventDefault();
                },
                target: '_blank'
              },
              {
                key: 'disabled',
                text: 'Disabled item',
                disabled: true,
                onClick: () => console.error('Disabled item should not be clickable.')
              }
            ]
          }}
        />
      </div>
    );
  }
}

ReactDOM.render(<ContextualMenuBasicExample />, document.getElementById('content'));