diff --git a/README.md b/README.md
index b4ef599..c8a032b 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,7 @@ npm install vue-stepper --save
 |  `steps`           | Array of Objects  | Each object is a step that will be included in the stepper |
 |  `locale`           | String  | Default: `en`. Current options: `en`, `es`, `pt`, `ja`, `he`, `cn`, `ru` , `ar`. |
 |  `top-buttons`           | Boolean  | Default: `false`. If `true` buttons on the header, at the start and the end of the steps, will be shown for better user experience. |
+|  `clickable-circles`           | Boolean  | Default: `false`. If `true` the circle buttons in the header will become clickable allowing you to switch between steps. |
 |  `keep-alive`           | Boolean  | Default: `true`. If `true` step components won't be destroy in each step change, bue if `false` they will. |
 |  `reset`           | Boolean  | Default: `false`. If `true` the steps will be reset |
 
diff --git a/src/HorizontalStepper.scss b/src/HorizontalStepper.scss
index faedcc9..a54a171 100644
--- a/src/HorizontalStepper.scss
+++ b/src/HorizontalStepper.scss
@@ -128,6 +128,10 @@
             padding: 1rem;
           }
         }
+        .clickable-circle {   
+          @extend .circle;
+          cursor: pointer;            
+        }
         .step-title {
           position: absolute;
           top: 90%;
diff --git a/src/HorizontalStepper.vue b/src/HorizontalStepper.vue
index d3beaad..61e1e0d 100644
--- a/src/HorizontalStepper.vue
+++ b/src/HorizontalStepper.vue
@@ -10,8 +10,13 @@
                 </template>
                 <template v-for="(step, index) in steps">
                     <div :class="['step', isStepActive(index, step)]" :key="index" :style="{width: `${100 / steps.length}%`}">
-                        <div class="circle">
-                            <i class="material-icons md-18">
+                         <div v-if="clickableCircles" class="clickable-circle"  @click="activateStep(index)">
+                           <i class="material-icons md-18">
+                                {{ (step.completed) ? 'done' : step.icon }}
+                            </i>
+                        </div>
+                        <div v-else class="circle">
+                           <i class="material-icons md-18">
                                 {{ (step.completed) ? 'done' : step.icon }}
                             </i>
                         </div>
@@ -68,6 +73,10 @@ export default {
       type: Boolean,
       default: false
     },
+    clickableCircles: {
+      type: Boolean,
+      default: false
+    },
     steps: {
       type: Array,
       default: function() {