diff --git a/examples/active-class-name/README.md b/examples/active-class-name/README.md
new file mode 100644
index 00000000..7f8b074e
--- /dev/null
+++ b/examples/active-class-name/README.md
@@ -0,0 +1,29 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/active-class-name)
+
+# activeClassName example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/active-class-name
+cd active-class-name
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+ReactRouter has a convenience property on the `Link` element to allow an author to set the _active_ className on a link. This example replicates that functionality using Next's own `Link`.
diff --git a/examples/active-class-name/components/Link.js b/examples/active-class-name/components/Link.js
new file mode 100644
index 00000000..6621c72c
--- /dev/null
+++ b/examples/active-class-name/components/Link.js
@@ -0,0 +1,18 @@
+import { withRouter } from 'next/router';
+import Link from 'next/link';
+import React, { Children } from 'react';
+
+const ActiveLink = ({ router, children, ...props }) => {
+ const child = Children.only(children);
+
+ let className = child.props.className || '';
+ if (router.pathname === props.href && props.activeClassName) {
+ className = `${className} ${props.activeClassName}`.trim();
+ }
+
+ delete props.activeClassName;
+
+ return {React.cloneElement(child, { className })};
+};
+
+export default withRouter(ActiveLink);
diff --git a/examples/active-class-name/components/Nav.js b/examples/active-class-name/components/Nav.js
new file mode 100644
index 00000000..e6249f5a
--- /dev/null
+++ b/examples/active-class-name/components/Nav.js
@@ -0,0 +1,31 @@
+import Link from './Link';
+import Head from 'next/head';
+
+export default () => (
+
+);
diff --git a/examples/active-class-name/package.json b/examples/active-class-name/package.json
new file mode 100644
index 00000000..2af6844e
--- /dev/null
+++ b/examples/active-class-name/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "active-class-name",
+ "version": "1.0.0",
+ "scripts": {
+ "dev": "next",
+ "build": "next build",
+ "start": "next start"
+ },
+ "author": "Remy Sharp ",
+ "dependencies": {
+ "next": "latest",
+ "react": "^16.0.0",
+ "react-dom": "^16.0.0"
+ },
+ "license": "ISC"
+}
diff --git a/examples/active-class-name/pages/about.js b/examples/active-class-name/pages/about.js
new file mode 100644
index 00000000..e6097671
--- /dev/null
+++ b/examples/active-class-name/pages/about.js
@@ -0,0 +1,8 @@
+import Nav from '../components/Nav';
+
+export default () => (
+
+
+
Hello, I'm About.js
+
+);
diff --git a/examples/active-class-name/pages/index.js b/examples/active-class-name/pages/index.js
new file mode 100644
index 00000000..3aa81e8c
--- /dev/null
+++ b/examples/active-class-name/pages/index.js
@@ -0,0 +1,8 @@
+import Nav from '../components/Nav';
+
+export default () => (
+
+
+
Hello, I'm the home page
+
+);