diff --git a/docs/src/pages/configurations/options-parameter/index.md b/docs/src/pages/configurations/options-parameter/index.md
index a27947850322..c4753b3e512f 100644
--- a/docs/src/pages/configurations/options-parameter/index.md
+++ b/docs/src/pages/configurations/options-parameter/index.md
@@ -71,6 +71,15 @@ addons.setConfig({
    * @type {String}	
    */	
   selectedPanel: undefined,
+
+  /**	
+   * Select the default active tab on Mobile.
+   * 0 - Sidebar
+   * 1 - Canvas
+   * 2 - Addons
+   * @type {Number}	
+   */	
+  initialActive: 0,
 });
 ```
 
diff --git a/lib/api/src/index.tsx b/lib/api/src/index.tsx
index a4a008f142c0..1e7dac893794 100644
--- a/lib/api/src/index.tsx
+++ b/lib/api/src/index.tsx
@@ -23,7 +23,11 @@ import initStories, {
   SubAPI as StoriesAPI,
   StoriesRaw,
 } from './modules/stories';
-import initLayout, { SubState as LayoutSubState, SubAPI as LayoutAPI } from './modules/layout';
+import initLayout, {
+  ActiveTabs,
+  SubState as LayoutSubState,
+  SubAPI as LayoutAPI,
+} from './modules/layout';
 import initShortcuts, {
   SubState as ShortcutsSubState,
   SubAPI as ShortcutsAPI,
@@ -35,6 +39,7 @@ import initVersions, {
 } from './modules/versions';
 
 export { Options as StoreOptions, Listener as ChannelListener };
+export { ActiveTabs };
 
 const ManagerContext = createContext({ api: undefined, state: getInitialState({}) });
 
diff --git a/lib/api/src/modules/layout.ts b/lib/api/src/modules/layout.ts
index 1805cd997126..1e636598e55e 100644
--- a/lib/api/src/modules/layout.ts
+++ b/lib/api/src/modules/layout.ts
@@ -11,8 +11,14 @@ import Store from '../store';
 import { Provider } from '../init-provider-api';
 
 export type PanelPositions = 'bottom' | 'right';
+export const ActiveTabs = {
+  SIDEBAR: 0,
+  CANVAS: 1,
+  ADDONS: 2,
+};
 
 export interface Layout {
+  initialActive: number;
   isFullscreen: boolean;
   showPanel: boolean;
   panelPosition: PanelPositions;
@@ -137,6 +143,7 @@ const initial: SubState = {
     docsMode: false,
   },
   layout: {
+    initialActive: ActiveTabs.SIDEBAR,
     isToolshown: true,
     isFullscreen: false,
     showPanel: true,
diff --git a/lib/ui/src/components/layout/mobile.js b/lib/ui/src/components/layout/mobile.js
index 467cdf30e4fb..619a832b99a7 100644
--- a/lib/ui/src/components/layout/mobile.js
+++ b/lib/ui/src/components/layout/mobile.js
@@ -1,10 +1,13 @@
 import React, { Component, Children } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
+import { ActiveTabs } from '@storybook/api';
 
 import { TabButton } from '@storybook/components';
 import { Root } from './container';
 
+const { SIDEBAR, CANVAS, ADDONS } = ActiveTabs;
+
 const Pane = styled.div(
   {
     transition: 'transform .2s ease',
@@ -52,22 +55,22 @@ const Pane = styled.div(
   },
   ({ active, index }) => {
     switch (true) {
-      case index === 0 && active === 0: {
+      case index === 0 && active === SIDEBAR: {
         return {
           transform: 'translateX(-0px)',
         };
       }
-      case index === 1 && active === 0: {
+      case index === 1 && active === SIDEBAR: {
         return {
           transform: 'translateX(40vw) translateY(-42.5vh) translateY(40px) scale(0.2)',
         };
       }
-      case index === 1 && active === 2: {
+      case index === 1 && active === ADDONS: {
         return {
           transform: 'translateX(-40vw) translateY(-42.5vh) translateY(40px) scale(0.2)',
         };
       }
-      case index === 2 && active === 2: {
+      case index === 2 && active === ADDONS: {
         return {
           transform: 'translateX(0px)',
         };
@@ -125,10 +128,9 @@ const Bar = styled.nav(
 class Mobile extends Component {
   constructor(props) {
     super();
-
     const { options } = props;
     this.state = {
-      active: options.initialActive || 0,
+      active: options.initialActive || SIDEBAR,
     };
   }
 
@@ -165,12 +167,12 @@ class Mobile extends Component {
           <Panel hidden={!viewMode} />
         </Panels>
         <Bar active={active}>
-          <TabButton onClick={() => this.setState({ active: 0 })} active={active === 0}>
+          <TabButton onClick={() => this.setState({ active: SIDEBAR })} active={active === SIDEBAR}>
             Sidebar
           </TabButton>
           <TabButton
-            onClick={() => this.setState({ active: 1 })}
-            active={active === 1 || active === false}
+            onClick={() => this.setState({ active: CANVAS })}
+            active={active === CANVAS || active === false}
           >
             {viewMode ? 'Canvas' : null}
             {pages.map(({ key, route: Route }) => (
@@ -178,7 +180,7 @@ class Mobile extends Component {
             ))}
           </TabButton>
           {viewMode ? (
-            <TabButton onClick={() => this.setState({ active: 2 })} active={active === 2}>
+            <TabButton onClick={() => this.setState({ active: ADDONS })} active={active === ADDONS}>
               Addons
             </TabButton>
           ) : null}