diff --git a/browser/devtools/shared/widgets/BreadcrumbsWidget.jsm b/browser/devtools/shared/widgets/BreadcrumbsWidget.jsm
index 3a6f56c2fef..8eb16644d93 100644
--- a/browser/devtools/shared/widgets/BreadcrumbsWidget.jsm
+++ b/browser/devtools/shared/widgets/BreadcrumbsWidget.jsm
@@ -23,8 +23,10 @@ this.EXPORTED_SYMBOLS = ["BreadcrumbsWidget"];
  *
  * @param nsIDOMNode aNode
  *        The element associated with the widget.
+ * @param Object aOptions
+ *        - smoothScroll: specifies if smooth scrolling on selection is enabled.
  */
-this.BreadcrumbsWidget = function BreadcrumbsWidget(aNode) {
+this.BreadcrumbsWidget = function BreadcrumbsWidget(aNode, aOptions={}) {
   this.document = aNode.ownerDocument;
   this.window = this.document.defaultView;
   this._parent = aNode;
@@ -34,7 +36,8 @@ this.BreadcrumbsWidget = function BreadcrumbsWidget(aNode) {
   this._list.className = "breadcrumbs-widget-container";
   this._list.setAttribute("flex", "1");
   this._list.setAttribute("orient", "horizontal");
-  this._list.setAttribute("clicktoscroll", "true")
+  this._list.setAttribute("clicktoscroll", "true");
+  this._list.setAttribute("smoothscroll", !!aOptions.smoothScroll);
   this._list.addEventListener("keypress", e => this.emit("keyPress", e), false);
   this._list.addEventListener("mousedown", e => this.emit("mousePress", e), false);
   this._parent.appendChild(this._list);
@@ -46,7 +49,6 @@ this.BreadcrumbsWidget = function BreadcrumbsWidget(aNode) {
   this._list.addEventListener("underflow", this._onUnderflow.bind(this), false);
   this._list.addEventListener("overflow", this._onOverflow.bind(this), false);
 
-
   // These separators are used for CSS purposes only, and are positioned
   // off screen, but displayed with -moz-element.
   this._separators = this.document.createElement("box");