Update README

Author: Michaela Robosova

README.md

@@ -2,47 +2,142 @@
 
 > Vue.js 2 tree navigation with vue-router support
 
-For more information see [documentation/demo](https://vue-tree-navigation.misrob.cz)
+For more detailed information see [documentation/demo](https://vue-tree-navigation.misrob.cz)
 
 ## Features
 
 - unlimited number of levels
 - optional [vue-router](https://router.vuejs.org/en/) support (v2.0.0 or higher)
-- a possibility to define a default open level
+- generate navigation items automatically from _vue-router_ routes or define them manually
+- define a default open level
 - auto-open a level when a corresponding URL visited
 - focused on core functionality, only necessary styles included
 - elements are provided with meaningful classes to make customizations comfortable (for example `NavigationItem--active`, `NavigationLevel--level-1`, `NavigationLevel--closed`)
-- external URLs support
 
 ## Example
 
+### 1. Navigation items generated from _vue-router_ routes
+
+Let's suppose you use _vue-router_ with the following routes definition
+
+```javascript
+const routes = [
+  {
+    name: 'Home',
+    path: '/',
+  },
+  {
+    name: 'Running',
+    path: '/running',
+    children: [
+      {
+        name: 'Barefoot',
+        path: 'barefoot',
+      },
+    ],
+  },
+  {
+    name: 'Yoga',
+    path: '/yoga',
+    children: [
+      {
+        name: 'Mats',
+        path: 'mats',
+      },
+      {
+        name: 'Tops',
+        path: 'tops',
+      },
+    ],
+  },
+  {
+    name: 'About',
+    path: '/about',
+    children: [
+      {
+        name: 'Career',
+        path: 'career',
+        children: [
+          {
+            name: 'Design',
+            path: 'design',
+          },
+        ],
+      },
+    ],
+  },
+];
+```
+
+Then simply include _vue-tree-navigation_
+
 ```html
 <template>
-  <vue-tree-navigation :items="items" :defaultOpenLevel="1" />
+  <vue-tree-navigation />
+</template>
+```
+
+and it will generate the following menu:
+
+```
+- Home          // --> /
+- Running       // --> /running
+  - Barefoot    // --> /running/barefoot
+- Yoga          // --> /yoga
+  - Mats        // --> /yoga/mats
+  - Tops        // --> /yoga/tops
+- About         // --> /about
+  - Career      // --> /about/career
+    - Design    // --> /about/career/design
+```
+
+Do not forget to use named routes since _vue-tree-navigation_ uses `name` field to label navigation items.
+
+### 2. Menu items defined manually
+
+The following configuration
+
+```html
+<template>
+  <vue-tree-navigation :items="items" />
 </template>
 
 <script>
   export default {
     data() {
       return {
         items: [
-          { name: 'Products', children: [                       // category label
-            { name: 'Shoes', path: 'shoes' }                   // /shoes
+          { name: 'Products', children: [
+            { name: 'Shoes', path: 'shoes' }
           ]},
-          { name: 'About', path: 'about', children: [          // /about
-            { name: 'Contact', path: 'contact', children: [    // /about/contact
-              { name: 'E-mail', element: 'email' },             // /about/contact#email
-              { name: 'Phone', element: 'phone' }               // /about/contact#phone
+          { name: 'About', path: 'about', children: [
+            { name: 'Contact', path: 'contact', children: [
+              { name: 'E-mail', element: 'email' },
+              { name: 'Phone', element: 'phone' }
             ]},
           ]},
-          { name: 'Github', external: 'https://github.com' },   // https://github.com
+          { name: 'Github', external: 'https://github.com' },
         ],
       };
     },
   };
 </script>
 ```
 
+will generate
+
+```
+- Products     // category label
+  - Shoes      // --> /shoes
+- About        // --> /about
+  - Contact    // --> /about/contact
+    - E-mail   // --> /about/contact#email
+    - Phone    // --> /about/contact#phone
+- Github       // --> https://github.com
+```
+
+For more examples see [documentation/demo](https://vue-tree-navigation.misrob.cz)
+
 ## Installation
 
 ### NPM
@@ -62,7 +157,7 @@ Vue.use(VueTreeNavigation);
 ### Include with a script tag
 
 ```html
-<script src="https://unpkg.com/vue-tree-navigation@3.0.0/dist/vue-tree-navigation.js"></script>
+<script src="https://unpkg.com/vue-tree-navigation@4.0.0/dist/vue-tree-navigation.js"></script>
 
 <script>
   Vue.use(VueTreeNavigation)