diff --git a/docs/docgen.js b/docs/docgen.js
index dc43e6c..a7dd21e 100644
--- a/docs/docgen.js
+++ b/docs/docgen.js
@@ -80,8 +80,12 @@ function write_parameters(component){
     var defaultValue = ""
     if(prop.hasOwnProperty("defaultValue"))
       defaultValue = prop.defaultValue.value
-    var description = prop.description
-    content.push([name, type, required, defaultValue, description])
+    var descriptions = prop.description.split('\n')
+    content.push([name, type, required, defaultValue, descriptions[0].trim()])
+    for(d in descriptions){
+      if (d == 0) continue
+      content.push(['', '', '', '', descriptions[d].trim()])
+    }
   }
   text += create_rst_table(headers, content)
   return text
@@ -101,7 +105,12 @@ function write_methods(component){
     var content = []
     for(l in method.params){
       var params = method.params[l]
-      content.push([params.name, params.type.name, params.description])
+      descriptions = params.description.split('\n')
+      content.push([params.name, params.type.name, descriptions[0].trim()])
+      for(d in descriptions){
+        if(d == 0) continue
+        content.push(['', '', descriptions[d].trim()])
+      }
     }
     if (content.length > 0){
       text += "**Parameters**\n\n"
diff --git a/docs/source/create_a_napp_with_ui.rst b/docs/source/create_a_napp_with_ui.rst
index 0e546f2..0e2db4d 100644
--- a/docs/source/create_a_napp_with_ui.rst
+++ b/docs/source/create_a_napp_with_ui.rst
@@ -83,7 +83,7 @@ Below a template of kytos component is displayed.
 
    <template>
     <!-- This template tag is optional -->
-    <div class="k-menu-item"  icon="my_icon" tooltip="Sample Tooltip">
+    <div class="k-menu-item"  icon="desktop" tooltip="Sample Tooltip">
        <!-- You could put yours kytos components here -->
     </div>
    </template>
@@ -127,18 +127,21 @@ and display that into the component.
 .. code-block:: html
 
     <template>
-     <k-context-panel v-if="expanded">
-      <k-accordion >
-        <k-accordion-item title="Installed NApps">
-          <k-property-panel>
-            <k-property-panel-item v-if="napps"
-              v-for="napp in this.napps" :key="napp.name" :name="napp.name" :value="napp.version">
-            </k-property-panel-item>
-          </k-property-panel>
-        </k-accordion-item>
-      </k-accordion>
-     </k-context-panel>
+     <div class="k-menu-item" icon="cube" tooltip="Napp Status">
+      <k-context-panel>
+       <k-accordion >
+         <k-accordion-item title="Installed NApps">
+           <k-property-panel>
+             <k-property-panel-item v-if="napps"
+               v-for="napp in this.napps" :key="napp.name" :name="napp.name" :value="napp.version">
+             </k-property-panel-item>
+           </k-property-panel>
+         </k-accordion-item>
+       </k-accordion>
+      </k-context-panel>
+     </div>
     </template>
+
     <script>
     module.exports = {
       methods: {
diff --git a/src/components/kytos/accordion/AccordionItem.vue b/src/components/kytos/accordion/AccordionItem.vue
index 5504d44..6fe501d 100644
--- a/src/components/kytos/accordion/AccordionItem.vue
+++ b/src/components/kytos/accordion/AccordionItem.vue
@@ -24,6 +24,9 @@ export default {
   name: 'k-accordion-item',
   mixins: [KytosBaseWithIcon],
   props:{
+    /**
+    * Boolean value to represent whether the accordion item is checked.
+    */
     checked: {
       type: Boolean,
       default: true
diff --git a/src/components/kytos/base/KytosBaseWithIcon.js b/src/components/kytos/base/KytosBaseWithIcon.js
index 5020313..45540ef 100644
--- a/src/components/kytos/base/KytosBaseWithIcon.js
+++ b/src/components/kytos/base/KytosBaseWithIcon.js
@@ -12,7 +12,7 @@ export default {
   mixins: [KytosBase],
   props: {
     /**
-     * An Icon string
+     * An Icon string representing a awesome icon.
      */
     icon: {
       type: String,
diff --git a/src/components/kytos/inputs/Checkbox.vue b/src/components/kytos/inputs/Checkbox.vue
index b108e29..53515b0 100644
--- a/src/components/kytos/inputs/Checkbox.vue
+++ b/src/components/kytos/inputs/Checkbox.vue
@@ -23,16 +23,28 @@ export default {
   name: 'k-checkbox',
   mixins: [KytosBaseWithIcon],
   props: {
+      /**
+       * Model store the checked values.
+       */
       model: {
         type: Array,
       },
+      /**
+       * The value to checkbox button.
+       */
       value: {
         default: 0
       },
+      /**
+       * Initial value to checkbox, when true the checkbox will be checked, otherwise unchecked.
+       */
       checked: {
         type: Boolean,
         default: false
       },
+      /**
+       * Optinal action called after check a checkbox button.
+       */
       action: {
         type: Function,
         default: function(value) { return }
diff --git a/src/components/kytos/inputs/Dropdown.vue b/src/components/kytos/inputs/Dropdown.vue
index 9e9c581..7ea4dd2 100644
--- a/src/components/kytos/inputs/Dropdown.vue
+++ b/src/components/kytos/inputs/Dropdown.vue
@@ -25,18 +25,31 @@ export default {
   name: 'k-dropdown',
   mixins: [KytosBaseWithIcon],
   props: {
+    /**
+     * Property with the selected option.
+     */
     value:{
       type: String,
       default: ""
     },
+    /**
+     * A collection with all options that could be selected.
+     */
     options: {
       type: Array,
       required: true
     },
+    /**
+     * An event triggered when the dropdown change, this event should have the
+     * following content: {**name**: 'event_name', **content**: {} }
+     */
     event: {
       type: Object,
       default: undefined
     },
+    /**
+     * Optinal action called after select a dropdown option.
+     */
     action: {
       type: Function,
       default: function (value) { return }
@@ -48,12 +61,6 @@ export default {
     }
   },
   methods: {
-    /**
-    * Emit an event when the dropdown is changed
-    *
-    * @event On kytos dropdown change
-    * @type {object}
-    */
     emitEvent () {
       if (this.event !== undefined){
         let content = this.event.content
diff --git a/src/components/kytos/inputs/Input.vue b/src/components/kytos/inputs/Input.vue
index 97a2e72..2705026 100644
--- a/src/components/kytos/inputs/Input.vue
+++ b/src/components/kytos/inputs/Input.vue
@@ -23,8 +23,8 @@ export default {
   mixins: [KytosBaseWithIcon],
   props: {
    /**
-   * Input Current value
-   */
+    * The value to input button.
+    */
    value: {
       type: String,
       default: ""
diff --git a/src/components/kytos/inputs/Slider.vue b/src/components/kytos/inputs/Slider.vue
index e1d2669..61f1778 100644
--- a/src/components/kytos/inputs/Slider.vue
+++ b/src/components/kytos/inputs/Slider.vue
@@ -20,22 +20,37 @@ export default {
   name: 'k-slider',
   mixins: [KytosBaseWithIcon],
   props: {
+    /**
+     * Initial value assigned to slider input.
+     */
     initialValue: {
       type: Number,
       default: 0
     },
+    /**
+     * Optinal action called after change the range of slider input.
+     */
     action: {
       type: Function,
       default: function (val) { return }
     },
+    /**
+     * Minimum value assigned to slider input.
+     */
     min: {
       type: Number,
       default: 0
     },
+    /**
+     * Maximum value assigned to slider input.
+     */
     max: {
       type: Number,
       default: 100
     },
+    /**
+     * The minimum change when the slider increase or decrease.
+     */
     step: {
       type: Number,
       default: 1
diff --git a/src/components/kytos/inputs/Textarea.vue b/src/components/kytos/inputs/Textarea.vue
index 8da5460..57a363e 100644
--- a/src/components/kytos/inputs/Textarea.vue
+++ b/src/components/kytos/inputs/Textarea.vue
@@ -18,18 +18,30 @@ export default {
   name: 'k-textarea',
   mixins: [KytosBaseWithIcon],
   props: {
+   /**
+    * The value text used in TextArea.
+    */
    value: {
       type: String
     },
    modelValue: {
       default: ""
     },
+   /**
+    * A tooltip displayed in the text-area
+    */
    tooltip: {
       type: String
     },
+   /**
+    * String displayed when the text-area is empty.
+    */
    placeholder: {
       type: String
     },
+   /**
+    * Optimal action called after textarea changes.
+    */
    action: {
       type: Function,
       default: function(value) {return}
diff --git a/src/components/kytos/inputs/buttons/ButtonGroup.vue b/src/components/kytos/inputs/buttons/ButtonGroup.vue
index 880a764..51bf62f 100644
--- a/src/components/kytos/inputs/buttons/ButtonGroup.vue
+++ b/src/components/kytos/inputs/buttons/ButtonGroup.vue
@@ -26,7 +26,6 @@ export default {
   created: function() {
       this.buttons = this.$children;
   },
-
 }
 </script>
 
diff --git a/src/components/kytos/logging/Logging.vue b/src/components/kytos/logging/Logging.vue
index 72130d5..3e4158d 100644
--- a/src/components/kytos/logging/Logging.vue
+++ b/src/components/kytos/logging/Logging.vue
@@ -35,6 +35,9 @@ export default {
   name: 'k-logging',
   mixins: [KytosBaseWithIcon, LoggingUtils],
   methods: {
+    /**
+     * Method called to change the log level.
+     */
     select: function(selected){
       for (let log of this.logs){
         if (selected == 'all')
@@ -45,9 +48,15 @@ export default {
           log.display = false
       }
     },
+    /**
+     * Method to clear all logs stored.
+     */
     clear: function () {
       this.logs = []
     },
+    /**
+     * Method to start and stop store the logs from socked channel.
+     */
     play_pause(){
       if(this.playing == "play"){
         this.join_channel('log')
@@ -57,18 +66,24 @@ export default {
         this.playing = "play"
       }
     },
+    /**
+     * Change the logs colors.
+     */
     change_colors(){
       this.colors = (this.colors == "colors")? "no_colors": "colors"
     },
-   highlight: function(){
-     var logs = $('.k-logging-content div')
-     for (let log of logs){
-      if (log.innerText.includes(this.highlight_string) > 0){
-        var pattern = new RegExp(this.highlight_string, 'ig')
-        log.innerHTML = log.innerText.replace( pattern,"<span class='highlight'>"+this.highlight_string+"</span>")
+    /**
+     * Highlight the word searched.
+     */
+    highlight: function(){
+      var logs = $('.k-logging-content div')
+      for (let log of logs){
+       if (log.innerText.includes(this.highlight_string) > 0){
+         var pattern = new RegExp(this.highlight_string, 'ig')
+         log.innerHTML = log.innerText.replace( pattern,"<span class='highlight'>"+this.highlight_string+"</span>")
+       }
       }
-     }
-   }
+    }
   },
   mounted(){
     this.channels.add('log')
diff --git a/src/components/kytos/map/Map.vue b/src/components/kytos/map/Map.vue
index a39524f..a0937cf 100644
--- a/src/components/kytos/map/Map.vue
+++ b/src/components/kytos/map/Map.vue
@@ -27,6 +27,12 @@ export default {
   },
   methods: {
     setListeners () {
+      /**
+       * Change the map opacity based on number value.
+       *
+       * @event change-map-opacity
+       * @type {Number} The Opacity number
+       */
       this.$kytos.$on("change-map-opacity", this.changeMapOpacity);
     },
     changeMapOpacity (value) {
diff --git a/src/components/kytos/misc/ActionMenu.vue b/src/components/kytos/misc/ActionMenu.vue
index 2f52d6f..a298883 100644
--- a/src/components/kytos/misc/ActionMenu.vue
+++ b/src/components/kytos/misc/ActionMenu.vue
@@ -39,45 +39,37 @@ export default {
     }
   },
   methods: {
-    /**
-    * Update the search value, this methos is called when the search input is changed.
-    * @params {string} query Text that will be used to filter de action itens
-    */
     searchValue(query){
       this.search = query
     },
-    /**
-    * Toggle visibility of action menu.
-    */
     toggle() {
        this.show = !this.show
     },
-    /**
-    * Method to change the visibility of action menu to invisible.
-    */
     hide() {
        this.show = false
     },
-    /**
-    * Send to info panel the content to be displayed and hide the action menu.
-    */
     show_info_panel(item) {
       item.action()
       this.hide()
     },
     /**
-    * Method to add new action menu item
-    * @params {object} options Object with the params [name, author, shortkey, content]
-    */
+     * Method to add new action menu item
+     *
+     * @public
+     * @param {object} options An object with the params [name, author, shortkey, content]
+     */
     add_action_menu_item(options){
       var found = false
       for(var i in this.items){if(options.name == this.items[i].name) found = true}
       if(found == false){ this.items.push(options) }
     },
-    /**
-    * Method to register all listeners used by this component.
-    */
     register_listeners(){
+      /**
+       * Add a new action item in the k-action-menu.
+       *
+       * @event addActionMenuItem
+       * @type {object}
+       */
       this.$kytos.$on('addActionMenuItem', this.add_action_menu_item)
     },
   },
diff --git a/src/components/kytos/misc/InfoPanel.vue b/src/components/kytos/misc/InfoPanel.vue
index 83103ac..6e7df97 100644
--- a/src/components/kytos/misc/InfoPanel.vue
+++ b/src/components/kytos/misc/InfoPanel.vue
@@ -53,6 +53,19 @@ export default {
       this.infoPanelView = undefined
       this.content = undefined
     },
+    /**
+     * Show the Info Panel displayed in the right.
+     *
+     * @public
+     * @param {object} content An object filled with:
+     *
+     *                         {
+     *                          **component**: "search-hosts",
+     *                          **content**: {**msg**:"content used in the component"},
+     *                          **title**: "Search Hosts",
+     *                          **icon**: "desktop"
+     *                         }
+     */
     show (content) {
       this.infoPanelView = content.component
       this.content = content.content
@@ -62,7 +75,20 @@ export default {
       this.classObject['k-info-panel-max'] =  content.maximized
     },
     register_listeners () {
+      /**
+       * Hide the info panel displayed in the right.
+       *
+       * @event hideInfoPanel
+       * @type {NULL}
+       */
       this.$kytos.$on('hideInfoPanel', this.hide)
+
+      /**
+       * Show the info panel in the right.
+       *
+       * @event showInfoPanel
+       * @type {Object} An content to be displayed by InfoPanel.
+       */
       this.$kytos.$on('showInfoPanel', this.show)
     }
   },
diff --git a/src/components/kytos/misc/Menubar.vue b/src/components/kytos/misc/Menubar.vue
index 1f9c0d0..d7b1e6c 100644
--- a/src/components/kytos/misc/Menubar.vue
+++ b/src/components/kytos/misc/Menubar.vue
@@ -7,7 +7,7 @@
      </div>
      <k-button v-for="(component, index) in components"
                v-bind:class="{ active: activeItem==(index+1) }"
-               :key="component.icon"
+               :key="component.name"
                :icon="component.icon"
                :tooltip="component.tooltip"
                @click.native="setItem(index+1)"/>
diff --git a/src/components/kytos/misc/StatusBar.vue b/src/components/kytos/misc/StatusBar.vue
index c895008..925f724 100644
--- a/src/components/kytos/misc/StatusBar.vue
+++ b/src/components/kytos/misc/StatusBar.vue
@@ -38,6 +38,13 @@ export default {
     get_terminal (){
       return $('.k-status-bar span').typeIt(this.options)
     },
+    /**
+     * Display a message inside the k-status-bar.
+     *
+     * @public
+     * @param {string} message Message to be displayed.
+     * @param {boolean} error  If true will display the message in red, default is false
+     */
     set_status(message, error=false){
       if (error){
         message = "<span class='status-error'>" + message + "</span>"
@@ -45,6 +52,12 @@ export default {
       this.messages.push(message)
     },
     register_listeners(){
+      /**
+       * Show a status message in StatusBar
+       *
+       * @event statusMessage
+       * @type {string}
+       */
       this.$kytos.$on('statusMessage', this.set_status)
     }
   }
diff --git a/src/components/kytos/ppanel/PropertyPanelItem.vue b/src/components/kytos/ppanel/PropertyPanelItem.vue
index aa5df1e..d88bf85 100644
--- a/src/components/kytos/ppanel/PropertyPanelItem.vue
+++ b/src/components/kytos/ppanel/PropertyPanelItem.vue
@@ -18,10 +18,16 @@ export default {
   name: 'k-property-panel-item',
   mixins: [KytosBase],
   props: {
+    /**
+     * Name displayed in the header of property panel item.
+     */
     name: {
       type: String,
       required: true,
     },
+    /**
+     * Value displayed in the data of property panel item.
+     */
     value: {
       type: [String, Number],
       required: true,
diff --git a/src/components/kytos/topology/Topology.vue b/src/components/kytos/topology/Topology.vue
index 48539d9..2519785 100644
--- a/src/components/kytos/topology/Topology.vue
+++ b/src/components/kytos/topology/Topology.vue
@@ -52,9 +52,21 @@ export default {
     setListeners () {
       this.$kytos.$on('changeLinksColor', this.change_links_color)
       this.$kytos.$on('clearLinksColor', this.clear_links_color)
+      /**
+       * Highlight all switches of topology.
+       *
+       * @event topology-highlightAll
+       * @type {object} Pointer that was cliced with p.x and p.y attributes
+       */
       this.$kytos.$on("topology-highlightAll", (p) => {
         if (!this.check_switch_under_click(p)) this.highlight_all_elements()
       })
+      /**
+       * Change the switches label
+       *
+       * @event topology-toggle-label
+       * @type {object} A content with label and node-type
+       */
       this.$kytos.$on("topology-toggle-label", this.toggle_labels)
     },
     clear_links_color(){