diff --git a/__tests__/src/components/ThumbnailNavigation.test.js b/__tests__/src/components/ThumbnailNavigation.test.js
index e0fa0b41e00b532ba4a8270c21071f7cecb0a68b..647055868bc4b200aa66a6c4f863530d0bc765ae 100644
--- a/__tests__/src/components/ThumbnailNavigation.test.js
+++ b/__tests__/src/components/ThumbnailNavigation.test.js
@@ -130,4 +130,17 @@ describe('ThumbnailNavigation', () => {
       });
     });
   });
+  describe('when viewingDirection="right-to-left"', () => {
+    beforeEach(() => {
+      wrapper = createWrapper({
+        viewingDirection: 'right-to-left',
+      });
+    });
+
+    it('sets up react-window to be rtl', () => {
+      expect(wrapper
+        .find('AutoSizer').dive().find('List').dive()
+        .props().style.direction).toEqual('rtl');
+    });
+  });
 });
diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js
index 3e755c7fafdb3b5f92905c21439a6bb751599460..b02188bf97ab607708409c69b2ee70b1ff715401 100644
--- a/src/components/ThumbnailNavigation.js
+++ b/src/components/ThumbnailNavigation.js
@@ -176,11 +176,13 @@ export class ThumbnailNavigation extends Component {
       classes,
       config,
       position,
+      viewingDirection,
       windowId,
     } = this.props;
     if (position === 'off') {
       return <></>;
     }
+    const htmlDir = viewingDirection === 'right-to-left' ? 'rtl' : 'ltr';
     return (
       <Paper
         className={classNames(
@@ -201,6 +203,7 @@ export class ThumbnailNavigation extends Component {
         >
           {({ height, width }) => (
             <List
+              direction={htmlDir}
               height={this.areaHeight(height)}
               itemCount={this.itemCount()}
               itemSize={this.calculateScaledSize}
@@ -236,6 +239,7 @@ ThumbnailNavigation.propTypes = {
   setPreviousCanvas: PropTypes.func,
   t: PropTypes.func.isRequired,
   view: PropTypes.string,
+  viewingDirection: PropTypes.string,
   windowId: PropTypes.string.isRequired,
 };
 
@@ -245,4 +249,5 @@ ThumbnailNavigation.defaultProps = {
   setNextCanvas: () => {},
   setPreviousCanvas: () => {},
   view: undefined,
+  viewingDirection: '',
 };
diff --git a/src/containers/ThumbnailNavigation.js b/src/containers/ThumbnailNavigation.js
index 57c01f33df4d028ebd456480dd110609d6048356..e6022cd40508575c0f76d1fcd6613f267e5be972 100644
--- a/src/containers/ThumbnailNavigation.js
+++ b/src/containers/ThumbnailNavigation.js
@@ -9,6 +9,7 @@ import { ThumbnailNavigation } from '../components/ThumbnailNavigation';
 import {
   getNextCanvasGrouping, getPreviousCanvasGrouping,
   getManifestCanvases, getCanvasIndex, getWindowViewType,
+  getManifestViewingDirection,
 } from '../state/selectors';
 
 /**
@@ -29,6 +30,7 @@ const mapStateToProps = (state, { windowId }) => {
     hasPreviousCanvas: !!getPreviousCanvasGrouping(state, { windowId }),
     position: state.companionWindows[state.windows[windowId].thumbnailNavigationId].position,
     view: viewType,
+    viewingDirection: getManifestViewingDirection(state, { windowId }),
   };
 };