         </Link>
       </li>
 
-    <div>
-      <div
-        style={{
-          overflowY: 'auto'
-          position: 'fixed'
-          width: "calc(#{rhythm(8)} - 1px)"
-          borderRight: '1px solid lightgrey'
-        }}
-      >
-        <ul
+    <Breakpoint minWidth=700>
+      <div>
+        <div
           style={{
-            listStyle: 'none'
-            marginLeft: 0
-            marginTop: rhythm(1/2)
+            overflowY: 'auto'
+            position: 'fixed'
+            width: "calc(#{rhythm(8)} - 1px)"
+            borderRight: '1px solid lightgrey'
           }}
         >
-          {docPages}
-        </ul>
+          <ul
+            style={{
+              listStyle: 'none'
+              marginLeft: 0
+              marginTop: rhythm(1/2)
+            }}
+          >
+            {docPages}
+          </ul>
+        </div>
+        <div
+          style={{
+            padding: "0 #{rhythm(1)}"
+            paddingLeft: "calc(#{rhythm(8)} + #{rhythm(1)})"
+          }}
+        >
+          <RouteHandler typography={typography} {...@props}/>
+        </div>
       </div>
-      <div
-        style={{
-          padding: "0 #{rhythm(1)}"
-          paddingLeft: "calc(#{rhythm(8)} + #{rhythm(1)})"
-        }}
+    </Breakpoint>
+    <Breakpoint maxWidth=700>
+      <strong>Topics:</strong>
+      {' '}
+      <select
+        defaultValue={@props.state.path}
+        onChange={@handleTopicChange}
       >
-        <RouteHandler typography={typography} {...@props}/>
-      </div>
-    </div>
+        {docOptions}
+      </select>
+      <br />
+      <br />
+      <RouteHandler typography={typography} {...@props}/>
+    </Breakpoint>

      }

    childPages = sortBy childPages, (child) -> child.order

    docPages = childPages.map (child) =>
      isActive = @isActive(child.path)

{rhythm, fontSizeToMS} = typography

module.exports = React.createClass
  mixins: [State, Navigation]

  handleTopicChange: (e) ->
    # Transition to new topic that was selected.
    @transitionTo e.target.value

  render: ->
    {rhythm} = @props.typography
    childPages = @props.childPages.map (child) ->
