diff --git a/docs/configuration.md b/docs/configuration.md
index 113b91daf..c07b42711 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -80,7 +80,6 @@ The default logo displayed in the top left corner of the Alfresco Content Applic
 ### Header Background color
 
 You can change the header background color by specifying color code for the "headerColor" key:
- 
 
 ```json
 {
diff --git a/docs/images/navigation-01.png b/docs/images/navigation-01.png
new file mode 100644
index 000000000..55d205fef
Binary files /dev/null and b/docs/images/navigation-01.png differ
diff --git a/docs/images/navigation-02.png b/docs/images/navigation-02.png
new file mode 100644
index 000000000..962fa9428
Binary files /dev/null and b/docs/images/navigation-02.png differ
diff --git a/docs/images/navigation-03.png b/docs/images/navigation-03.png
new file mode 100644
index 000000000..a6119996b
Binary files /dev/null and b/docs/images/navigation-03.png differ
diff --git a/docs/index.html b/docs/index.html
index cff81616b..27b3954ed 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -71,6 +71,10 @@
                     {
                         title: 'Configuration',
                         path: 'configuration'
+                    },
+                    {
+                        title: 'Navigation',
+                        path: 'navigation'
                     }
                 ]
             }
diff --git a/docs/navigation.md b/docs/navigation.md
new file mode 100644
index 000000000..e1c656b3a
--- /dev/null
+++ b/docs/navigation.md
@@ -0,0 +1,166 @@
+# Navigation
+
+The Alfresco Content Application provides the following navigation links:
+
+- Personal Files
+- File Libraries
+- Shared
+- Recent Files
+- Favorites
+- Trash
+
+The side navigation provides support to customize the appearance of the links by editing the `app.config.json`.
+
+## Customization
+
+Navigation configuration supports array and object like schema. Defining an object helps navigation to render visual delimiters between different groups of links.
+
+```json
+{
+  "navigation": {
+     "main": [
+      ...
+     ],
+   "secondary": [
+     ...
+    ]
+  }
+}
+```
+
+![](images/navigation-01.png)
+
+```json
+{
+  "navigation": [
+    { ... },
+    { ... },
+    ...
+  ]
+}
+```
+
+![](images/navigation-02.png)
+
+### Customize icons and text
+
+`icon` -  supported value can be anything from [Material Design](https://material.io/icons) icons library. If not defined, the link will render just the label value.
+
+`title` - instructs the link to render a native browser tooltip with the given value. It can be a string or a i18n defined reference. If not defined, the link will not show a tooltip.
+
+`label` - represents the visual name of the link. It can be a string or a i18n defined reference.
+
+<p class="danger">
+  Changing ` "route": { "url": "/..." } ` value will affect the navigation since these are mapped to application routing system.
+</p>
+
+### Custom text (i18n)
+
+To change the `title` and `label` of navigation links edit the values under `BROWSE` entry found at `/src/assets/i18n/en.json`
+
+```json
+"APP" : {
+  ...
+  BROWSE: {
+    "PERSONAL": {
+    "TITLE": "Personal Files",
+    "SIDENAV_LINK": {
+        "LABEL": "Personal Files",
+        "TOOLTIP": "View your Personal Files"
+      }
+    },
+    ...
+  }
+}
+```
+
+For more information about internationalization see [Internationalization (i18n)](/i18n) section.
+
+## User-defined navigation
+
+To add custom navigation link for the application, first we need to create a component.
+
+```src/app/components/custom-page/custom-page.component.ts```
+
+```javascript
+
+  import { Component } from '@angular/core';
+
+  @Component({
+    template: `
+      <h4>{{ title }}</h4>
+    `
+  })
+  export class CustomPage {
+    title = 'My Custom Page'
+  }
+
+```
+
+Register the component in ```app.module.ts```
+
+```javascript
+
+  ...
+  import { CustomPage } from './components/custom-page/custom-page.component';
+
+  @NgModule({
+    ...
+    declarations: [
+    ...,
+    CustomPage
+    ]
+    ...
+})
+
+```
+
+In the `app.config.json` define a link entry which will point to the custom page
+
+```json
+
+{
+  ...,
+  "navigation": [
+      "main": [ ... ],
+      "secondary: [ ... ],
+      "custom": [
+        {
+          "icon": "work",
+          "label": "Link",
+          "title": "My custome link",
+          "route": {
+              "url": "/custom-route"
+          }
+        }
+      ]
+  ]
+}
+
+```
+
+Map the `/custom-route` in `app.routes.ts` as a child of `LayoutComponent` definition.
+
+```json
+
+  import { CustomPage } from './components/custom-page/custom-page.component.ts';
+
+  ...
+  {
+    path: '',
+    component: LayoutComponent,
+    children: [
+     ...,
+     {
+        path: 'custom-route',
+        component: CustomPage
+      }
+    ]
+  }
+  ...,
+
+```
+
+![](images/navigation-03.png)
+
+For more information about the content of a custom page see [Document List Layout](/doc-list) section.