diff --git a/src/navigator/config/config.js b/src/navigator/config/config.js
index 12abd1971..7a4992e79 100644
--- a/src/navigator/config/config.js
+++ b/src/navigator/config/config.js
@@ -58,5 +58,17 @@ export default {
    *  }
    * }
    */
-  onRender: () => {}
+  onRender: () => {},
+
+  /**
+   * Extend Layer view object (view/ItemView.js)
+   * @example
+   * extend: {
+   *   setName(name) {
+   *     // this.model is the component of the layer
+   *     this.model.set('another-prop-for-name', name);
+   *   },
+   * },
+   */
+  extend: {}
 };
diff --git a/src/navigator/index.js b/src/navigator/index.js
index 66605989f..db89fb2a8 100644
--- a/src/navigator/index.js
+++ b/src/navigator/index.js
@@ -1,5 +1,5 @@
 import defaults from './config/config';
-import ItemView from './view/ItemView';
+import View from './view/ItemView';
 import { isElement } from 'underscore';
 
 export default () => {
@@ -14,7 +14,6 @@ export default () => {
       config = { ...defaults, ...opts };
       config.stylePrefix = opts.pStylePrefix;
       em = config.em;
-
       return this;
     },
 
@@ -23,7 +22,9 @@ export default () => {
     },
 
     onLoad() {
+      const ItemView = View.extend(config.extend);
       layers = new ItemView({
+        ItemView,
         level: 0,
         config,
         opened: config.opened || {},
diff --git a/src/navigator/view/ItemView.js b/src/navigator/view/ItemView.js
index 03bd64dce..2f79c7e10 100644
--- a/src/navigator/view/ItemView.js
+++ b/src/navigator/view/ItemView.js
@@ -188,7 +188,7 @@ export default Backbone.View.extend({
     const name = inputEl.textContent;
     inputEl.scrollLeft = 0;
     inputEl[inputProp] = false;
-    this.model.set({ 'custom-name': name });
+    this.setName(name, { component: this.model, propName: 'custom-name' });
     em && em.setEditing(0);
     $el
       .find(`.${this.inputNameCls}`)
@@ -196,6 +196,10 @@ export default Backbone.View.extend({
       .removeClass(clsEdit);
   },
 
+  setName(name, { propName }) {
+    this.model.set(propName, name);
+  },
+
   /**
    * Get the input containing the name of the component
    * @return {HTMLElement}
@@ -410,6 +414,7 @@ export default Backbone.View.extend({
     }
 
     const children = new ItemsView({
+      ItemView: opt.ItemView,
       collection: model.get('components'),
       config: this.config,
       sorter: this.sorter,
diff --git a/src/navigator/view/ItemsView.js b/src/navigator/view/ItemsView.js
index 7197d03d4..ce0c1ddf2 100644
--- a/src/navigator/view/ItemsView.js
+++ b/src/navigator/view/ItemsView.js
@@ -1,5 +1,4 @@
 import Backbone from 'backbone';
-import ItemView from './ItemView';
 import { eventDrag } from 'dom_components/model/Component';
 
 export default Backbone.View.extend({
@@ -76,11 +75,11 @@ export default Backbone.View.extend({
    * @return Object Object created
    * */
   addToCollection(model, fragmentEl, index) {
-    const { level, parentView } = this;
-    var fragment = fragmentEl || null;
-    var viewObject = ItemView;
-
-    var view = new viewObject({
+    const { level, parentView, opt } = this;
+    const { ItemView } = opt;
+    const fragment = fragmentEl || null;
+    const rendered = new ItemView({
+      ItemView,
       level,
       model,
       parentView,
@@ -88,8 +87,7 @@ export default Backbone.View.extend({
       sorter: this.sorter,
       isCountable: this.isCountable,
       opened: this.opt.opened
-    });
-    var rendered = view.render().el;
+    }).render().el;
 
     if (fragment) {
       fragment.appendChild(rendered);