diff --git a/__tests__/integration/mirador/window_sidebar.test.js b/__tests__/integration/mirador/window_sidebar.test.js
index 7be1345352efb3f8d69dc86a69eb3a2682a541b9..7b82d44ec92bc5926d2848e0903f8ae71c370896 100644
--- a/__tests__/integration/mirador/window_sidebar.test.js
+++ b/__tests__/integration/mirador/window_sidebar.test.js
@@ -3,16 +3,16 @@
 describe('Window Sidebars', () => {
   beforeAll(async () => {
     await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/');
-  });
 
-  it('renders and updates canvas level metadata', async () => {
     await expect(page).toClick('#addBtn');
     await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/001');
     await expect(page).toClick('#fetchBtn');
 
     await expect(page).toMatchElement('[data-manifestid="http://localhost:5000/api/001"] button');
     await expect(page).toClick('[data-manifestid="http://localhost:5000/api/001"] button');
+  });
 
+  it('renders and updates canvas level metadata', async () => {
     await expect(page).toMatchElement(
       'h3',
       { text: 'Bodleian Library Human Freaks 2 (33)' },
@@ -31,4 +31,19 @@ describe('Window Sidebars', () => {
 
     await expect(page).toMatchElement(`#${windowId} button[aria-label="Open information companion window"]`);
   });
+
+  it('renders canvas navigation and updates canvas after clicking a navigation item', async () => {
+    const windows = await page.evaluate(() => (
+      miradorInstance.store.getState().windows
+    ));
+
+    const windowId = Object.values(windows)
+      .find(window => window.manifestId === 'http://localhost:5000/api/001')
+      .id;
+
+    await expect(page).toMatchElement(`#${windowId} button[aria-label="Toggle window sidebar"]`);
+    await expect(page).toClick(`#${windowId} button[aria-label="Toggle window sidebar"]`);
+
+    await expect(page).toMatchElement(`#${windowId} button[aria-label="Open canvas navigation companion window"]`);
+  });
 });
diff --git a/__tests__/src/components/WindowSideBarCanvasPanel.test.js b/__tests__/src/components/WindowSideBarCanvasPanel.test.js
index f921e04877504fa53aae9b8daf2cf9d8d37437d8..90349a084e42140a255142290b4204d85d67ea65 100644
--- a/__tests__/src/components/WindowSideBarCanvasPanel.test.js
+++ b/__tests__/src/components/WindowSideBarCanvasPanel.test.js
@@ -7,6 +7,7 @@ import WindowSideBarCanvasPanel from '../../../src/components/WindowSideBarCanva
 
 describe('WindowSideBarCanvasPanel', () => {
   let wrapper;
+  let setCanvas;
   const canvasesIdAndLabel = [
     {
       id: 'testid1',
@@ -19,12 +20,15 @@ describe('WindowSideBarCanvasPanel', () => {
   ];
 
   beforeEach(() => {
+    setCanvas = jest.fn();
+
     wrapper = shallow(
       <WindowSideBarCanvasPanel
         canvasesIdAndLabel={canvasesIdAndLabel}
         classes={{}}
         t={key => key}
         windowId="xyz"
+        setCanvas={setCanvas}
       />,
     ).dive();
   });
@@ -51,4 +55,9 @@ describe('WindowSideBarCanvasPanel', () => {
       .render()
       .text()).toBe(canvasesIdAndLabel[1].label);
   });
+
+  it('should call the onClick handler', () => {
+    wrapper.find(Typography).at(1).simulate('click');
+    expect(setCanvas).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/locales/en/translation.json b/locales/en/translation.json
index 4dbcd1708da9d82d5a476038ced4ac37537fe568..cccb1a7cd96c16732278976805381d66fcbebc24 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -12,6 +12,7 @@
     "canvasIndex": "Index",
     "closeCompanionWindow": "Close this companion window",
     "closeInfoCompanionWindow": "Close information companion window",
+    "closeCanvasNavigationCompanionWindow": "Close canvas navigation companion window",
     "closeMenu": "Close Menu",
     "closeWindow": "Close window",
     "dark": "Dark",
@@ -24,6 +25,7 @@
     "menu": "Menu",
     "off": "Off",
     "openInfoCompanionWindow": "Open information companion window",
+    "openCanvasNavigationCompanionWindow": "Open canvas navigation companion window",
     "openWindows": "Open windows",
     "openInCompanionWindow": "Open in companion window",
     "position": "Position",
diff --git a/src/components/WindowSideBarCanvasPanel.js b/src/components/WindowSideBarCanvasPanel.js
index 9ee8eccf286dbac63c81dae33fcd01d8703eb2cb..3071ec368076f6278d389967cb3f83f3e61f1dff 100644
--- a/src/components/WindowSideBarCanvasPanel.js
+++ b/src/components/WindowSideBarCanvasPanel.js
@@ -13,15 +13,24 @@ class WindowSideBarCanvasPanel extends Component {
    * render
    */
   render() {
-    const { canvasesIdAndLabel, classes, t } = this.props;
+    const {
+      canvasesIdAndLabel, setCanvas, windowId, classes, t,
+    } = this.props;
+
     return (
       <>
         <Typography variant="h2" className={classes.windowSideBarH2}>{t('canvasIndex')}</Typography>
         <List>
           {
-            canvasesIdAndLabel.map(canvas => (
+            canvasesIdAndLabel.map((canvas, canvasIndex) => (
               <ListItem key={canvas.id}>
-                <Typography variant="body2">{canvas.label}</Typography>
+                <Typography
+                  className={classes.clickable}
+                  variant="body2"
+                  onClick={() => { setCanvas(windowId, canvasIndex); }}
+                >
+                  {canvas.label}
+                </Typography>
               </ListItem>
             ))
           }
@@ -32,17 +41,22 @@ class WindowSideBarCanvasPanel extends Component {
 }
 
 WindowSideBarCanvasPanel.propTypes = {
-  windowId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
+  windowId: PropTypes.string.isRequired,
   canvasesIdAndLabel: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  setCanvas: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   t: PropTypes.func.isRequired,
 };
 
 /**
  * @private
+ * custom style definitions
  */
 const styles = theme => ({
   windowSideBarH2: theme.typography.h5,
+  clickable: {
+    cursor: 'pointer',
+  },
 });
 
 export default withStyles(styles)(WindowSideBarCanvasPanel);
diff --git a/src/containers/WindowSideBarCanvasPanel.js b/src/containers/WindowSideBarCanvasPanel.js
index 52e395328a57acf730a5c3fa50ed5f4741017f25..6188bc8e995eecc9a2b6321791614c0c01c277ef 100644
--- a/src/containers/WindowSideBarCanvasPanel.js
+++ b/src/containers/WindowSideBarCanvasPanel.js
@@ -1,6 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withNamespaces } from 'react-i18next';
+import * as actions from '../state/actions';
 import WindowSideBarCanvasPanel from '../components/WindowSideBarCanvasPanel';
 import {
   getManifestCanvases,
@@ -19,8 +20,10 @@ const mapStateToProps = (state, { windowId }) => {
   };
 };
 
+const mapDispatchToProps = { setCanvas: actions.setCanvas };
+
 const enhance = compose(
-  connect(mapStateToProps),
+  connect(mapStateToProps, mapDispatchToProps),
   withNamespaces(),
 );
 
diff --git a/src/state/actions/workspace.js b/src/state/actions/workspace.js
index cec07c96505e948bd330fbf135dff62a16e01524..b8b03d96e4f23a21d85adc75c38f1fda046cb511 100644
--- a/src/state/actions/workspace.js
+++ b/src/state/actions/workspace.js
@@ -33,7 +33,7 @@ export function updateWorkspaceMosaicLayout(layout) {
 /**
  * updateWorkspaceMosaicLayout - action creator
  *
- * @param  {Object} layout
+ * @param  {Object} isWorkspaceAddVisible
  * @memberof ActionCreators
  */
 export function setWorkspaceAddVisibility(isWorkspaceAddVisible) {