diff --git a/docs/app/Components/ComponentDoc/ComponentDoc.js b/docs/app/Components/ComponentDoc/ComponentDoc.js
index 94df067a45..497eaaa93a 100644
--- a/docs/app/Components/ComponentDoc/ComponentDoc.js
+++ b/docs/app/Components/ComponentDoc/ComponentDoc.js
@@ -1,9 +1,12 @@
+import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { Component } from 'react'
 import DocumentTitle from 'react-document-title'
+import { withRouter } from 'react-router'
 import { Grid } from 'semantic-ui-react'
 
 import { withDocInfo } from 'docs/app/HOC'
+import { scrollToAnchor } from 'docs/app/utils'
 import ComponentDocHeader from './ComponentDocHeader'
 import ComponentDocLinks from './ComponentDocLinks'
 import ComponentDocSee from './ComponentDocSee'
@@ -11,47 +14,102 @@ import ComponentExamples from './ComponentExamples'
 import ComponentProps from './ComponentProps'
 import ComponentSidebar from './ComponentSidebar'
 
-const ComponentDoc = ({ componentGroup, componentName, description, ghLink, path, seeItems, suiLink }) => (
-  <DocumentTitle title={`${componentName} | Semantic UI React`}>
-    <div>
-      <Grid padded columns='1'>
-        <Grid.Column>
-          <ComponentDocHeader componentName={componentName} description={description} />
-          <ComponentDocSee items={seeItems} />
-          <ComponentDocLinks
-            componentName={componentName}
-            ghLink={ghLink}
-            path={path}
-            suiLink={suiLink}
-          />
-          <ComponentProps componentGroup={componentGroup} componentName={componentName} />
-        </Grid.Column>
-      </Grid>
-
-      <ComponentExamples componentName={componentName} />
-    </div>
-  </DocumentTitle>
-)
-
-ComponentDoc.propTypes = {
-  componentGroup: PropTypes.arrayOf(
-    PropTypes.shape({
-      description: PropTypes.string,
-      props: PropTypes.object,
-    }),
-  ),
-  componentName: PropTypes.string.isRequired,
-  description: PropTypes.string,
-  ghLink: PropTypes.string.isRequired,
-  path: PropTypes.string.isRequired,
-  seeItems: PropTypes.arrayOf(
-    PropTypes.shape({
-      description: PropTypes.string,
-      name: PropTypes.string,
-      type: PropTypes.string,
-    }),
-  ).isRequired,
-  suiLink: PropTypes.string,
+const topRowStyle = { margin: '1em' }
+
+class ComponentDoc extends Component {
+  static childContextTypes = {
+    onPassed: PropTypes.func,
+  }
+
+  static propTypes = {
+    componentGroup: PropTypes.arrayOf(
+      PropTypes.shape({
+        description: PropTypes.string,
+        props: PropTypes.object,
+      }),
+    ),
+    componentName: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    ghLink: PropTypes.string.isRequired,
+    history: PropTypes.object.isRequired,
+    path: PropTypes.string.isRequired,
+    seeItems: PropTypes.arrayOf(
+      PropTypes.shape({
+        description: PropTypes.string,
+        name: PropTypes.string,
+        type: PropTypes.string,
+      }),
+    ).isRequired,
+    suiLink: PropTypes.string,
+  }
+
+  state = {}
+
+  getChildContext() {
+    return {
+      onPassed: this.handleExamplePassed,
+    }
+  }
+
+  componentWillReceiveProps({ componentName: next }) {
+    const { componentName: current } = this.props
+
+    if (current !== next) this.setState({ activePath: undefined })
+  }
+
+  handleExamplePassed = (e, { examplePath }) => this.setState({ activePath: examplePath })
+
+  handleExamplesRef = examplesRef => this.setState({ examplesRef })
+
+  handleSidebarItemClick = (e, { path }) => {
+    const { history } = this.props
+    const aPath = _.kebabCase(_.last(path.split('/')))
+
+    history.replace(`${location.pathname}#${aPath}`)
+    scrollToAnchor()
+  }
+
+  render() {
+    const { componentGroup, componentName, description, ghLink, path, seeItems, suiLink } = this.props
+    const { activePath, examplesRef } = this.state
+
+    return (
+      <DocumentTitle title={`${componentName} | Semantic UI React`}>
+        <Grid>
+          <Grid.Row columns='equal' style={topRowStyle}>
+            <Grid.Column>
+              <ComponentDocHeader componentName={componentName} description={description} />
+              <ComponentDocSee items={seeItems} />
+              <ComponentDocLinks
+                componentName={componentName}
+                ghLink={ghLink}
+                path={path}
+                suiLink={suiLink}
+              />
+              <ComponentProps componentGroup={componentGroup} componentName={componentName} />
+            </Grid.Column>
+            <Grid.Column computer={5} largeScreen={4} widescreen={4} />
+          </Grid.Row>
+
+          <Grid.Row columns='equal'>
+            <Grid.Column>
+              <div ref={this.handleExamplesRef}>
+                <ComponentExamples componentName={componentName} />
+              </div>
+            </Grid.Column>
+            <Grid.Column computer={5} largeScreen={4} widescreen={4}>
+              <ComponentSidebar
+                activePath={activePath}
+                componentName={componentName}
+                examplesRef={examplesRef}
+                onItemClick={this.handleSidebarItemClick}
+              />
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </DocumentTitle>
+    )
+  }
 }
 
-export default withDocInfo(ComponentDoc)
+export default withDocInfo(withRouter(ComponentDoc))
diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js b/docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js
index e138c7f3b2..d52384d153 100644
--- a/docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js
+++ b/docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
diff --git a/docs/app/Components/ComponentDoc/ComponentSidebar/ComponentSidebar.js b/docs/app/Components/ComponentDoc/ComponentSidebar/ComponentSidebar.js
index 86f7921e1b..0915ebb2b2 100644
--- a/docs/app/Components/ComponentDoc/ComponentSidebar/ComponentSidebar.js
+++ b/docs/app/Components/ComponentDoc/ComponentSidebar/ComponentSidebar.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { Accordion, Menu, Sticky } from 'semantic-ui-react'
 
-import { pure } from 'docs/app/HOC'
 import menuInfo from 'docs/app/menuInfo.json'
 import ComponentSideBarSection from './ComponentSidebarSection'
 
diff --git a/docs/app/utils/docs.js b/docs/app/utils/docs.js
deleted file mode 100644
index 807f66a16a..0000000000
--- a/docs/app/utils/docs.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import _ from 'lodash/fp'
-
-import docInfo from 'docs/app/docgenInfo.json'
-import * as semanticUIReact from 'src'
-import { repoURL } from './constants'
-
-const docPaths = _.keys(docInfo)
-
-/**
- * Get a path of the passed component in the generated doc definitions.
- *
- * @param {string} componentName A name of component.
- * @return {string}
- */
-export const getDocPath = componentName => _.find(
-  path => new RegExp(`${__PATH_SEP__}${componentName}.js$`).test(path),
-  docPaths,
-)
-
-/**
- * Get generated doc definitions of the passed component.
- *
- * @param {string} componentName A name of component.
- * @return {object}
- */
-export const getDocInfo = componentName => _.get(getDocPath(componentName), docInfo)
-
-/**
- * Get props definitions of the passed component from the generated doc definitions.
- *
- * @param {string} componentName A name of component.
- * @return {array}
- */
-export const getDocProps = componentName => _.get('props', getDocInfo(componentName))
-
-/**
- * Get a component description of the passed component from the generated doc definitions.
- *
- * @param {string} componentName A name of component.
- * @return {array} An array of lines that represents the description.
- */
-export const getDocDescription = componentName => _.get('docBlock.description', getDocInfo(componentName))
-
-/**
- * Get subcomponents of the passed component.
- *
- * @param {string} componentName A name of component.
- * @return {array} An array of subcomponent names.
- */
-export const getDocSubComponents = componentName => _.map(
-  '_meta.name',
-  _.filter(component => _.get('_meta.parent', component) === componentName, semanticUIReact),
-)
-
-/**
- * Get POSIX path no matter the OS path separator, use '/'.
- *
- * @param {string} componentName A name of component.
- * @return {string}
- */
-export const getPosixPath = componentName => getDocPath(componentName)
-  .replace(new RegExp(_.escapeRegExp(__PATH_SEP__), 'g'), '/')
-
-/**
- * Get link to the source on Github of passed component.
- *
- * @param {string} componentName A name of component.
- * @return {string}
- */
-export const getDocGithubSourceUrl = componentName => `${repoURL}/blob/master/${getPosixPath(componentName)}`
-
-/**
- * Get link to the Semantic UI Docs of the passed component.
- *
- * @param {string} componentName A name of component.
- * @param {string} type A type of a component.
- * @return {string}
- */
-export const getDocSemanticUiUrl = (componentName, type) => `https://semantic-ui.com/${type}s/${componentName}`
-  .toLowerCase()
-
-/**
- * Get items that marked as @see in component doc.
- *
- * @param {string} componentName A name of component.
- * @return {array} Returns an array of objects that contain info about a related component.
- */
-export const getDocSeeItems = componentName => _.map(({ description }) => {
-  const seeMeta = _.get('_meta', semanticUIReact[description])
-
-  if (!seeMeta) return null
-  const { type, name } = seeMeta
-
-  return { description, name, type }
-}, _.filter(['title', 'see'], _.get('docBlock.tags', getDocInfo(componentName))))
diff --git a/docs/app/utils/index.js b/docs/app/utils/index.js
index bf79e7677c..39952acda7 100644
--- a/docs/app/utils/index.js
+++ b/docs/app/utils/index.js
@@ -4,7 +4,6 @@ import * as semanticUIReact from 'src'
 import { META } from 'src/lib'
 
 export * from './constants'
-export * from './docs'
 export getComponentGroup from './getComponentGroup'
 export getSeeItems from './getSeeItems'
 export scrollToAnchor from './scrollToAnchor'