<div id="viewDiv"></div>
html,
body,
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.esri-ui .esri-attribution {
  left: auto;
}
require([
  "esri/views/SceneView",
  "esri/views/MapView",
  "esri/widgets/Expand",
  "esri/widgets/BasemapGallery"
],
function(SceneView, MapView, Expand, BasemapGallery) {
  
  var viewOptions = {
    container: "viewDiv",
    map: {
      basemap: "streets-vector"
    },
    center: [-98.35, 39.5],
    zoom: 2
  };

  // 2D:
  var view = new MapView(viewOptions);

  // 3D:
  // var view = new SceneView(viewOptions);
  
  var basemapGallery = new BasemapGallery({
    view: view
  });
  
  var expand = new Expand({
    view: view,
    content: basemapGallery,
    expandTooltip: 'Change Basemap'
  });
  view.ui.add(expand, "top-right");
  
  // Using the "watch" concept
  // https://developers.arcgis.com/javascript/latest/guide/index.html#watching-property-changes
  // to watch the "activeBasemap" property of the BasemapGallery
  // When it changes, close the Expand widget.
  basemapGallery.watch('activeBasemap', function() {
    console.log('changed!');
    expand.expanded = !expand.expanded;
  })
});

External CSS

  1. https://js.arcgis.com/4.29/esri/css/main.css
  2. https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.0.2/css/calcite-web.min.css

External JavaScript

  1. https://js.arcgis.com/4.29/