CommandBar

link - developer.microsoft.com/en-us/fluentui#/controls/web/commandbar

import * as React from 'react';  

import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';  

import { CommandBar, ICommandBarItemProps } from '@fluentui/react/lib/CommandBar';  
import { IButtonProps } from '@fluentui/react/lib/Button';  

const overflowProps: IButtonProps = { ariaLabel: 'More commands' }; 

export class BETCommandBar extends React.Component { 
  render() { 
    initializeIcons(); 

    return( 
      <div> 

      <CommandBar 
        items={_items} 
        overflowItems={_overflowItems} 
        overflowButtonProps={overflowProps} 
        farItems={_farItems} 
        ariaLabel="Use left and right arrow keys to navigate between commands" 
      /> 
    </div> 
    ); 
  } 
} 

const _items: ICommandBarItemProps[] = [ 
  { 
    key: 'newItem',  
    text: 'New',  
    cacheKey: 'myCacheKey', // changing this key will invalidate this item's cache 
    iconProps: { iconName: 'Add' },  
    subMenuProps: { 
      items: [ 
        { 
          key: 'emailMessage',  
          text: 'Email message', 
          iconProps: { iconName: 'Mail' },  
          ['data-automation-id']: 'newEmailButton', // optional 
        }, 
        { 
          key: 'calendarEvent',  
          text: 'Calendar event', 
          iconProps: { iconName: 'Calendar' },  
        }, 
      ], 
    }, 
  }, 
  { 
    key: 'upload',  
    text: 'Upload',  
    iconProps: { iconName: 'Upload' },  
    onClick: () => console.log('Upload'),  
  }, 
  { 
    key: 'share',  
    text: 'Share',  
    iconProps: { iconName: 'Share' },  
    onClick: () => console.log('Share'),  
  }, 
  { 
    key: 'download',  
    text: 'Download',  
    iconProps: { iconName: 'Download' },  
    onClick: () => console.log('Download'),  
  }, 
]; 

const _overflowItems: ICommandBarItemProps[] = [ 
  { key: 'move', text: 'Move to...', onClick: () => console.log('Move to'), iconProps: { iconName: 'MoveToFolder' } }, 
  { key: 'copy', text: 'Copy to...', onClick: () => console.log('Copy to'), iconProps: { iconName: 'Copy' } }, 
  { key: 'rename', text: 'Rename...', onClick: () => console.log('Rename'), iconProps: { iconName: 'Edit' } }, 
]; 

const _farItems: ICommandBarItemProps[] = [ 
  { 
    key: 'info',  
    text: 'Info',  
    // This needs an ariaLabel since it's icon-only  
    ariaLabel: 'Info',  
    iconOnly: true, 
    iconProps: { iconName: 'Info' },  
    onClick: () => console.log('Info'),  
  }, 
];