diff --git a/src/plugins/workspace/public/containers/workspace_dropdown_list/workspace_dropdown_list.tsx b/src/plugins/workspace/public/containers/workspace_dropdown_list/workspace_dropdown_list.tsx
index cb411daee59..f7e0113e2c4 100644
--- a/src/plugins/workspace/public/containers/workspace_dropdown_list/workspace_dropdown_list.tsx
+++ b/src/plugins/workspace/public/containers/workspace_dropdown_list/workspace_dropdown_list.tsx
@@ -7,7 +7,6 @@ import React, { useState, useCallback, useMemo, useEffect } from 'react';
 
 import { EuiButton, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 import useObservable from 'react-use/lib/useObservable';
-import { i18n } from '@osd/i18n';
 import { CoreStart, WorkspaceAttribute } from '../../../../../core/public';
 import { WORKSPACE_APP_ID, PATHS } from '../../../common/constants';
 
@@ -15,7 +14,6 @@ type WorkspaceOption = EuiComboBoxOptionOption<WorkspaceAttribute>;
 
 interface WorkspaceDropdownListProps {
   coreStart: CoreStart;
-  onSwitchWorkspace: (workspaceId: string) => Promise<void>;
 }
 
 function workspaceToOption(workspace: WorkspaceAttribute): WorkspaceOption {
@@ -28,7 +26,8 @@ export function getErrorMessage(err: any) {
 }
 
 export function WorkspaceDropdownList(props: WorkspaceDropdownListProps) {
-  const { coreStart, onSwitchWorkspace } = props;
+  const { coreStart } = props;
+
   const workspaceList = useObservable(coreStart.workspaces.client.workspaceList$, []);
   const currentWorkspace = useObservable(coreStart.workspaces.client.currentWorkspace$, null);
 
@@ -53,22 +52,19 @@ export function WorkspaceDropdownList(props: WorkspaceDropdownListProps) {
     [allWorkspaceOptions]
   );
 
-  const onChange = (workspaceOption: WorkspaceOption[]) => {
-    /** switch the workspace */
-    setLoading(true);
-    onSwitchWorkspace(workspaceOption[0].key!)
-      .catch((err) =>
-        coreStart.notifications.toasts.addDanger({
-          title: i18n.translate('workspace.dropdownList.switchWorkspaceErrorTitle', {
-            defaultMessage: 'some error happens when switching workspace',
-          }),
-          text: getErrorMessage(err),
-        })
-      )
-      .finally(() => {
-        setLoading(false);
-      });
-  };
+  const onChange = useCallback(
+    (workspaceOption: WorkspaceOption[]) => {
+      /** switch the workspace */
+      setLoading(true);
+      const id = workspaceOption[0].key!;
+      const newUrl = coreStart.workspaces?.formatUrlWithWorkspaceId(window.location.href, id);
+      if (newUrl) {
+        window.location.href = newUrl;
+      }
+      setLoading(false);
+    },
+    [coreStart.workspaces]
+  );
 
   const onCreateWorkspaceClick = () => {
     coreStart.application.navigateToApp(WORKSPACE_APP_ID, { path: PATHS.create });
diff --git a/src/plugins/workspace/public/mount.tsx b/src/plugins/workspace/public/mount.tsx
index 03e4cb38a3a..c4ca29479d2 100644
--- a/src/plugins/workspace/public/mount.tsx
+++ b/src/plugins/workspace/public/mount.tsx
@@ -12,17 +12,7 @@ export const mountDropdownList = (core: CoreStart) => {
   core.chrome.navControls.registerLeft({
     order: 0,
     mount: (element) => {
-      ReactDOM.render(
-        <WorkspaceDropdownList
-          coreStart={core}
-          onSwitchWorkspace={async (id: string) => {
-            await new Promise((resolve) => setTimeout(resolve, 1000));
-            alert(`switch to workspace ${id}`);
-          }}
-          // onSwitchWorkspace={(id: string) => alert(`switch to workspace ${id}`)}
-        />,
-        element
-      );
+      ReactDOM.render(<WorkspaceDropdownList coreStart={core} />, element);
       return () => {
         ReactDOM.unmountComponentAtNode(element);
       };