diff --git a/README.md b/README.md
index 734336a..27178d9 100644
--- a/README.md
+++ b/README.md
@@ -49,6 +49,16 @@ context.dispatch();
 ```
 <img src="https://github.com/gofynd/fdk-extension-bridge-javascript/blob/master/demo/context_item.png" alt="Context Item"><hr>
 
+## For Including Breadcrumb
+
+```javascript
+let breadCrumbs = new components.Breadcrumb(EXT, {
+    displayText: "Export Data",
+});
+breadCrumbs.dispatch();
+```
+<img src="https://github.com/gofynd/fdk-extension-bridge-javascript/blob/breadcrumb-support/demo/breadcrumb.png" alt="Breadcrumb"><hr>
+
 ## For resetting extesnion bridge
 
 ```javascript
diff --git a/components/base.component.js b/components/base.component.js
index cb0fe77..395d6ea 100644
--- a/components/base.component.js
+++ b/components/base.component.js
@@ -55,6 +55,22 @@ class Component {
             }
         });
     }
+
+    setState(config = {}, id, payload){
+        let namespace = `${this.type}/${this.eventName}`;
+        let dispatchPayload  = {
+            target: this.type,
+            id: `${namespace}:${id}`,
+            action: this.eventName, // click,register,change
+            data: {
+                config
+            }
+        }
+        if(payload) {
+            dispatchPayload.data.payload = payload
+        }
+        this.extension.transport.dispatch(dispatchPayload)
+    }
 }
 
 module.exports = Component;
\ No newline at end of file
diff --git a/components/breadcrumb.component.js b/components/breadcrumb.component.js
new file mode 100644
index 0000000..bb20225
--- /dev/null
+++ b/components/breadcrumb.component.js
@@ -0,0 +1,54 @@
+'use strict';
+
+const Component = require("./base.component");
+
+const c_type = 'Breadcrumb';
+const Actions = {
+    SHOW: 'show'
+};
+
+class Breadcrumb extends Component{
+
+    /**
+     * 
+     * @param {*} extension 
+     * @param {*} config 
+     * 
+     * {
+     *     "displayText": "",
+     * }
+     */
+    constructor(extension, config) {
+        super(extension, c_type, config.id);
+        this.displayText = config.displayText || 'Settings';
+        this.config = {
+            displayText: this.displayText
+        }
+    }
+    
+    // subscribe(eventName, callback) {
+    //     if(eventName !== Actions.SHOW) {
+    //         return "" // throw error
+    //     }
+    //     return super.subscribe(eventName, callback);
+    // }
+
+    // unsubscribe(listnerId) {
+    //     return super.unsubscribe(listnerId);
+    // }
+
+    dispatch(payload = null){
+        return super.dispatch(this.config, payload);
+    }
+
+
+    setState() {
+        // to set state of a component
+    }
+}
+
+Breadcrumb.Actions = Actions;
+Breadcrumb.component_type = c_type;
+
+module.exports = Breadcrumb;
+
diff --git a/components/button.component.js b/components/button.component.js
index a251988..2cee8de 100644
--- a/components/button.component.js
+++ b/components/button.component.js
@@ -50,6 +50,7 @@ class Button extends Component{
 
 
     setState({label,disabled,buttonType}) {
+        // ignore this
         // to set state of a component
         if(label){
             this.label = label
@@ -60,7 +61,6 @@ class Button extends Component{
         if(type){
             this.buttonType = buttonType
         }
-        this.dispatch()
     }
 }
 
diff --git a/components/index.js b/components/index.js
index 2c47e09..3fd3536 100644
--- a/components/index.js
+++ b/components/index.js
@@ -4,9 +4,11 @@
 const Button = require("./button.component");
 const ToggleButton = require("./toggle_button.component");
 const ContextMenuItem = require("./context_menu_item.component");
+const Breadcrumb = require("./breadcrumb.component");
 
 module.exports = {
     Button,
     ToggleButton,
-    ContextMenuItem
+    ContextMenuItem,
+    Breadcrumb
 }
\ No newline at end of file
diff --git a/components/toggle_button.component.js b/components/toggle_button.component.js
index 048ea2d..1d2694d 100644
--- a/components/toggle_button.component.js
+++ b/components/toggle_button.component.js
@@ -49,8 +49,11 @@ class ToggleButton extends Component{
     }
 
 
-    setState() {
+    setState(payload = null) {
         // to set state of a component
+        if(payload){
+            return super.setState(this.config, this.id, payload);
+        }
     }
 }
 
diff --git a/demo/breadcrumb.png b/demo/breadcrumb.png
new file mode 100644
index 0000000..4af12c1
Binary files /dev/null and b/demo/breadcrumb.png differ