diff --git a/src/line-by-line-printer.js b/src/line-by-line-printer.js
index 6e7e4e6..042584d 100644
--- a/src/line-by-line-printer.js
+++ b/src/line-by-line-printer.js
@@ -33,7 +33,8 @@
       fileHtmlId: printerUtils.getHtmlId(file),
       diffs: diffs,
       filePath: filePathTemplate.render({
-        fileDiffName: printerUtils.getDiffName(file)
+        fileDiffPath: printerUtils.getDiffPath(file),
+        fileDiffFilename: printerUtils.getDiffFilename(file)
       }, {
         fileIcon: fileIconTemplate,
         fileTag: fileTagTemplate
diff --git a/src/printer-utils.js b/src/printer-utils.js
index 1add31c..52ddf34 100644
--- a/src/printer-utils.js
+++ b/src/printer-utils.js
@@ -95,6 +95,18 @@
     return 'unknown/file/path';
   };
 
+  PrinterUtils.prototype.getDiffPath = function(file) {
+    var path = this.getDiffName(file);
+    var parts = path.split(separator);
+    var lastPart = parts[parts.length - 1];
+    return path.slice(0, -lastPart.length);
+  };
+
+  PrinterUtils.prototype.getDiffFilename = function(file) {
+    var parts = this.getDiffName(file).split(separator);
+    return parts[parts.length - 1];
+  };
+
   PrinterUtils.prototype.getFileTypeIcon = function(file) {
     var templateName = 'file-changed';
 
diff --git a/src/side-by-side-printer.js b/src/side-by-side-printer.js
index c990842..dd89fad 100644
--- a/src/side-by-side-printer.js
+++ b/src/side-by-side-printer.js
@@ -40,7 +40,8 @@
       fileHtmlId: printerUtils.getHtmlId(file),
       diffs: diffs,
       filePath: filePathTemplate.render({
-        fileDiffName: printerUtils.getDiffName(file)
+        fileDiffPath: printerUtils.getDiffPath(file),
+        fileDiffFilename: printerUtils.getDiffFilename(file)
       }, {
         fileIcon: fileIconTemplate,
         fileTag: fileTagTemplate
diff --git a/src/templates/diff2html-templates.js b/src/templates/diff2html-templates.js
index 05d9ba8..2ce2b99 100644
--- a/src/templates/diff2html-templates.js
+++ b/src/templates/diff2html-templates.js
@@ -1,10 +1,10 @@
 (function() {
 if (!!!global.browserTemplates) global.browserTemplates = {};
-var Hogan = require("hogan.js");global.browserTemplates["file-summary-line"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<li class=\"d2h-file-list-line\">");t.b("\n" + i);t.b("    <span class=\"d2h-file-name-wrapper\">");t.b("\n" + i);t.b("      <span>");t.b(t.rp("<fileIcon0",c,p,""));t.b("</span>");t.b("\n" + i);t.b("      <a href=\"#");t.b(t.v(t.f("fileHtmlId",c,p,0)));t.b("\" class=\"d2h-file-name\">");t.b(t.v(t.f("fileName",c,p,0)));t.b("</a>");t.b("\n" + i);t.b("      <span class=\"d2h-file-stats\">");t.b("\n" + i);t.b("          <span class=\"d2h-lines-added\">");t.b(t.v(t.f("addedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b("          <span class=\"d2h-lines-deleted\">");t.b(t.v(t.f("deletedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b("      </span>");t.b("\n" + i);t.b("    </span>");t.b("\n" + i);t.b("</li>");return t.fl(); },partials: {"<fileIcon0":{name:"fileIcon", partials: {}, subs: {  }}}, subs: {  }});
+var Hogan = require("hogan.js");global.browserTemplates["file-summary-line"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<li class=\"d2h-file-list-line\">");t.b("\n" + i);t.b("    <span class=\"d2h-file-path-wrapper\">");t.b("\n" + i);t.b("      <span>");t.b(t.rp("<fileIcon0",c,p,""));t.b("</span>");t.b("\n" + i);t.b("      <a href=\"#");t.b(t.v(t.f("fileHtmlId",c,p,0)));t.b("\" class=\"d2h-file-path\">");t.b(t.v(t.f("fileName",c,p,0)));t.b("</a>");t.b("\n" + i);t.b("      <span class=\"d2h-file-stats\">");t.b("\n" + i);t.b("          <span class=\"d2h-lines-added\">");t.b(t.v(t.f("addedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b("          <span class=\"d2h-lines-deleted\">");t.b(t.v(t.f("deletedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b("      </span>");t.b("\n" + i);t.b("    </span>");t.b("\n" + i);t.b("</li>");return t.fl(); },partials: {"<fileIcon0":{name:"fileIcon", partials: {}, subs: {  }}}, subs: {  }});
 global.browserTemplates["file-summary-wrapper"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"d2h-file-list-wrapper\">");t.b("\n" + i);t.b("    <div class=\"d2h-file-list-header\">");t.b("\n" + i);t.b("        <span class=\"d2h-file-list-title\">Files changed (");t.b(t.v(t.f("filesNumber",c,p,0)));t.b(")</span>");t.b("\n" + i);t.b("        <a class=\"d2h-file-switch d2h-hide\">hide</a>");t.b("\n" + i);t.b("        <a class=\"d2h-file-switch d2h-show\">show</a>");t.b("\n" + i);t.b("    </div>");t.b("\n" + i);t.b("    <ol class=\"d2h-file-list\">");t.b("\n" + i);t.b("    ");t.b(t.t(t.f("files",c,p,0)));t.b("\n" + i);t.b("    </ol>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
 global.browserTemplates["generic-column-line-number"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.f("lineClass",c,p,0)));t.b(" ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\"></td>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"");t.b(t.v(t.f("contentClass",c,p,0)));t.b(" ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b(t.t(t.f("blockHeader",c,p,0)));t.b("</div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: {  }});
 global.browserTemplates["generic-empty-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"");t.b(t.v(t.f("contentClass",c,p,0)));t.b(" ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("            File without changes");t.b("\n" + i);t.b("        </div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: {  }});
-global.browserTemplates["generic-file-path"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-file-name-wrapper\">");t.b("\n" + i);t.b("    <span class=\"d2h-icon-wrapper\">");t.b(t.rp("<fileIcon0",c,p,""));t.b("</span>");t.b("\n" + i);t.b("    <span class=\"d2h-file-name\">");t.b(t.v(t.f("fileDiffName",c,p,0)));t.b("</span>");t.b("\n" + i);t.b(t.rp("<fileTag1",c,p,"    "));t.b("</span>");return t.fl(); },partials: {"<fileIcon0":{name:"fileIcon", partials: {}, subs: {  }},"<fileTag1":{name:"fileTag", partials: {}, subs: {  }}}, subs: {  }});
+global.browserTemplates["generic-file-path"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<span class=\"d2h-file-path-wrapper\">");t.b("\n" + i);t.b("    <span class=\"d2h-icon-wrapper\">");t.b(t.rp("<fileIcon0",c,p,""));t.b("</span>");t.b("\n" + i);t.b("    <span class=\"d2h-file-path\">");t.b(t.v(t.f("fileDiffPath",c,p,0)));t.b("</span>");t.b("\n" + i);t.b("    <span class=\"d2h-file-name\">");t.b(t.v(t.f("fileDiffFilename",c,p,0)));t.b("</span>");t.b("\n" + i);t.b(t.rp("<fileTag1",c,p,"    "));t.b("</span>");return t.fl(); },partials: {"<fileIcon0":{name:"fileIcon", partials: {}, subs: {  }},"<fileTag1":{name:"fileTag", partials: {}, subs: {  }}}, subs: {  }});
 global.browserTemplates["generic-line"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.f("lineClass",c,p,0)));t.b(" ");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);t.b("      ");t.b(t.t(t.f("lineNumber",c,p,0)));t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"");t.b(t.v(t.f("contentClass",c,p,0)));t.b(" ");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);if(t.s(t.f("prefix",c,p,1),c,p,0,171,247,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("            <span class=\"d2h-code-line-prefix\">");t.b(t.t(t.f("prefix",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}if(t.s(t.f("content",c,p,1),c,p,0,279,353,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("            <span class=\"d2h-code-line-ctn\">");t.b(t.t(t.f("content",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}t.b("        </div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: {  }});
 global.browserTemplates["generic-wrapper"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"d2h-wrapper\">");t.b("\n" + i);t.b("    ");t.b(t.t(t.f("content",c,p,0)));t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
 global.browserTemplates["icon-file-added"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<svg aria-hidden=\"true\" class=\"d2h-icon d2h-added\" height=\"16\" title=\"added\" version=\"1.1\" viewBox=\"0 0 14 16\"");t.b("\n" + i);t.b("     width=\"14\">");t.b("\n" + i);t.b("    <path d=\"M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM6 9H3V7h3V4h2v3h3v2H8v3H6V9z\"></path>");t.b("\n" + i);t.b("</svg>");return t.fl(); },partials: {}, subs: {  }});
diff --git a/src/templates/file-summary-line.mustache b/src/templates/file-summary-line.mustache
index 27d373b..0060dd7 100644
--- a/src/templates/file-summary-line.mustache
+++ b/src/templates/file-summary-line.mustache
@@ -1,7 +1,7 @@
 <li class="d2h-file-list-line">
-    <span class="d2h-file-name-wrapper">
+    <span class="d2h-file-path-wrapper">
       <span>{{>fileIcon}}</span>
-      <a href="#{{fileHtmlId}}" class="d2h-file-name">{{fileName}}</a>
+      <a href="#{{fileHtmlId}}" class="d2h-file-path">{{fileName}}</a>
       <span class="d2h-file-stats">
           <span class="d2h-lines-added">{{addedLines}}</span>
           <span class="d2h-lines-deleted">{{deletedLines}}</span>
diff --git a/src/templates/generic-file-path.mustache b/src/templates/generic-file-path.mustache
index cc71b18..e0b2b1b 100644
--- a/src/templates/generic-file-path.mustache
+++ b/src/templates/generic-file-path.mustache
@@ -1,5 +1,6 @@
-<span class="d2h-file-name-wrapper">
+<span class="d2h-file-path-wrapper">
     <span class="d2h-icon-wrapper">{{>fileIcon}}</span>
-    <span class="d2h-file-name">{{fileDiffName}}</span>
+    <span class="d2h-file-path">{{fileDiffPath}}</span>
+    <span class="d2h-file-name">{{fileDiffFilename}}</span>
     {{>fileTag}}
 </span>
diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 9d4096d..559e363 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -40,7 +40,7 @@
   margin-left: 1px;
 }
 
-.d2h-file-name-wrapper {
+.d2h-file-path-wrapper {
   display: flex;
   align-items: center;
   width: 100%;
@@ -49,7 +49,7 @@
   line-height: 15px;
 }
 
-.d2h-file-name {
+.d2h-file-path {
   line-height: 33px;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -246,7 +246,7 @@
   text-align: left;
 }
 
-.d2h-file-list-line .d2h-file-name {
+.d2h-file-list-line .d2h-file-path {
   line-height: 21px;
 }
 
diff --git a/test/diff2html-tests.js b/test/diff2html-tests.js
index 99649d0..8545d7f 100644
--- a/test/diff2html-tests.js
+++ b/test/diff2html-tests.js
@@ -50,12 +50,12 @@ var filesExample1 =
   '    </div>\n' +
   '    <ol class="d2h-file-list">\n' +
   '    <li class="d2h-file-list-line">\n' +
-  '    <span class="d2h-file-name-wrapper">\n' +
+  '    <span class="d2h-file-path-wrapper">\n' +
   '      <span><svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"\n' +
   '     viewBox="0 0 14 16" width="14">\n' +
   '    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>\n' +
   '</svg></span>\n' +
-  '      <a href="#d2h-675094" class="d2h-file-name">sample</a>\n' +
+  '      <a href="#d2h-675094" class="d2h-file-path">sample</a>\n' +
   '      <span class="d2h-file-stats">\n' +
   '          <span class="d2h-lines-added">+1</span>\n' +
   '          <span class="d2h-lines-deleted">-1</span>\n' +
@@ -70,10 +70,11 @@ var htmlLineExample1 =
   '<div class="d2h-wrapper">\n' +
   '    <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">\n' +
   '    <div class="d2h-file-header">\n' +
-  '    <span class="d2h-file-name-wrapper">\n' +
+  '    <span class="d2h-file-path-wrapper">\n' +
   '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
   '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
   '</svg></span>\n' +
+  '    <span class="d2h-file-path"></span>\n' +
   '    <span class="d2h-file-name">sample</span>\n' +
   '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
   '    </div>\n' +
@@ -122,10 +123,11 @@ var htmlSideExample1 =
   '<div class="d2h-wrapper">\n' +
   '    <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">\n' +
   '    <div class="d2h-file-header">\n' +
-  '      <span class="d2h-file-name-wrapper">\n' +
+  '      <span class="d2h-file-path-wrapper">\n' +
   '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
   '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
   '</svg></span>\n' +
+  '    <span class="d2h-file-path"></span>\n' +
   '    <span class="d2h-file-name">sample</span>\n' +
   '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
   '    </div>\n' +
diff --git a/test/file-list-printer-tests.js b/test/file-list-printer-tests.js
index 89e9dc1..d0004ef 100644
--- a/test/file-list-printer-tests.js
+++ b/test/file-list-printer-tests.js
@@ -45,12 +45,12 @@ describe('FileListPrinter', function() {
         '    </div>\n' +
         '    <ol class="d2h-file-list">\n' +
         '    <li class="d2h-file-list-line">\n' +
-        '    <span class="d2h-file-name-wrapper">\n' +
+        '    <span class="d2h-file-path-wrapper">\n' +
         '      <span><svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"\n' +
         '     viewBox="0 0 14 16" width="14">\n' +
         '    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>\n' +
         '</svg></span>\n' +
-        '      <a href="#d2h-781444" class="d2h-file-name">my/file/name.js</a>\n' +
+        '      <a href="#d2h-781444" class="d2h-file-path">my/file/name.js</a>\n' +
         '      <span class="d2h-file-stats">\n' +
         '          <span class="d2h-lines-added">+12</span>\n' +
         '          <span class="d2h-lines-deleted">-41</span>\n' +
@@ -58,12 +58,12 @@ describe('FileListPrinter', function() {
         '    </span>\n' +
         '</li>\n' +
         '<li class="d2h-file-list-line">\n' +
-        '    <span class="d2h-file-name-wrapper">\n' +
+        '    <span class="d2h-file-path-wrapper">\n' +
         '      <span><svg aria-hidden="true" class="d2h-icon d2h-moved" height="16" title="renamed" version="1.1"\n' +
         '     viewBox="0 0 14 16" width="14">\n' +
         '    <path d="M6 9H3V7h3V4l5 4-5 4V9z m8-7v12c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h12c0.55 0 1 0.45 1 1z m-1 0H1v12h12V2z"></path>\n' +
         '</svg></span>\n' +
-        '      <a href="#d2h-662683" class="d2h-file-name">my/file/{name1.js → name2.js}</a>\n' +
+        '      <a href="#d2h-662683" class="d2h-file-path">my/file/{name1.js → name2.js}</a>\n' +
         '      <span class="d2h-file-stats">\n' +
         '          <span class="d2h-lines-added">+12</span>\n' +
         '          <span class="d2h-lines-deleted">-41</span>\n' +
@@ -71,12 +71,12 @@ describe('FileListPrinter', function() {
         '    </span>\n' +
         '</li>\n' +
         '<li class="d2h-file-list-line">\n' +
-        '    <span class="d2h-file-name-wrapper">\n' +
+        '    <span class="d2h-file-path-wrapper">\n' +
         '      <span><svg aria-hidden="true" class="d2h-icon d2h-added" height="16" title="added" version="1.1" viewBox="0 0 14 16"\n' +
         '     width="14">\n' +
         '    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM6 9H3V7h3V4h2v3h3v2H8v3H6V9z"></path>\n' +
         '</svg></span>\n' +
-        '      <a href="#d2h-781444" class="d2h-file-name">my/file/name.js</a>\n' +
+        '      <a href="#d2h-781444" class="d2h-file-path">my/file/name.js</a>\n' +
         '      <span class="d2h-file-stats">\n' +
         '          <span class="d2h-lines-added">+12</span>\n' +
         '          <span class="d2h-lines-deleted">-0</span>\n' +
@@ -84,12 +84,12 @@ describe('FileListPrinter', function() {
         '    </span>\n' +
         '</li>\n' +
         '<li class="d2h-file-list-line">\n' +
-        '    <span class="d2h-file-name-wrapper">\n' +
+        '    <span class="d2h-file-path-wrapper">\n' +
         '      <span><svg aria-hidden="true" class="d2h-icon d2h-deleted" height="16" title="removed" version="1.1"\n' +
         '     viewBox="0 0 14 16" width="14">\n' +
         '    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM11 9H3V7h8v2z"></path>\n' +
         '</svg></span>\n' +
-        '      <a href="#d2h-781444" class="d2h-file-name">my/file/name.js</a>\n' +
+        '      <a href="#d2h-781444" class="d2h-file-path">my/file/name.js</a>\n' +
         '      <span class="d2h-file-stats">\n' +
         '          <span class="d2h-lines-added">+0</span>\n' +
         '          <span class="d2h-lines-deleted">-41</span>\n' +
diff --git a/test/line-by-line-tests.js b/test/line-by-line-tests.js
index a0ba661..9767816 100644
--- a/test/line-by-line-tests.js
+++ b/test/line-by-line-tests.js
@@ -153,11 +153,12 @@ describe('LineByLinePrinter', function() {
       var expected =
         '<div id="d2h-781444" class="d2h-file-wrapper" data-lang="js">\n' +
         '    <div class="d2h-file-header">\n' +
-        '    <span class="d2h-file-name-wrapper">\n' +
+        '    <span class="d2h-file-path-wrapper">\n' +
         '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
         '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
         '</svg></span>\n' +
-        '    <span class="d2h-file-name">my/file/name.js</span>\n' +
+        '    <span class="d2h-file-path">my/file/</span>\n' +
+        '    <span class="d2h-file-name">name.js</span>\n' +
         '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
         '    </div>\n' +
         '    <div class="d2h-file-diff">\n' +
@@ -191,11 +192,12 @@ describe('LineByLinePrinter', function() {
       var expected =
         '<div id="d2h-781444" class="d2h-file-wrapper" data-lang="js">\n' +
         '    <div class="d2h-file-header">\n' +
-        '    <span class="d2h-file-name-wrapper">\n' +
+        '    <span class="d2h-file-path-wrapper">\n' +
         '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
         '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
         '</svg></span>\n' +
-        '    <span class="d2h-file-name">my/file/name.js</span>\n' +
+        '    <span class="d2h-file-path">my/file/</span>\n' +
+        '    <span class="d2h-file-name">name.js</span>\n' +
         '    <span class="d2h-tag d2h-added d2h-added-tag">ADDED</span></span>\n' +
         '    </div>\n' +
         '    <div class="d2h-file-diff">\n' +
@@ -229,11 +231,12 @@ describe('LineByLinePrinter', function() {
       var expected =
         '<div id="d2h-781444" class="d2h-file-wrapper" data-lang="js">\n' +
         '    <div class="d2h-file-header">\n' +
-        '    <span class="d2h-file-name-wrapper">\n' +
+        '    <span class="d2h-file-path-wrapper">\n' +
         '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
         '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
         '</svg></span>\n' +
-        '    <span class="d2h-file-name">my/file/name.js</span>\n' +
+        '    <span class="d2h-file-path">my/file/</span>\n' +
+        '    <span class="d2h-file-name">name.js</span>\n' +
         '    <span class="d2h-tag d2h-deleted d2h-deleted-tag">DELETED</span></span>\n' +
         '    </div>\n' +
         '    <div class="d2h-file-diff">\n' +
@@ -267,11 +270,12 @@ describe('LineByLinePrinter', function() {
       var expected =
         '<div id="d2h-662683" class="d2h-file-wrapper" data-lang="js">\n' +
         '    <div class="d2h-file-header">\n' +
-        '    <span class="d2h-file-name-wrapper">\n' +
+        '    <span class="d2h-file-path-wrapper">\n' +
         '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
         '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
         '</svg></span>\n' +
-        '    <span class="d2h-file-name">my/file/{name1.js → name2.js}</span>\n' +
+        '    <span class="d2h-file-path">my/file/</span>\n' +
+        '    <span class="d2h-file-name">{name1.js → name2.js}</span>\n' +
         '    <span class="d2h-tag d2h-moved d2h-moved-tag">RENAMED</span></span>\n' +
         '    </div>\n' +
         '    <div class="d2h-file-diff">\n' +
@@ -340,10 +344,11 @@ describe('LineByLinePrinter', function() {
         '<div class="d2h-wrapper">\n' +
         '    <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">\n' +
         '    <div class="d2h-file-header">\n' +
-        '    <span class="d2h-file-name-wrapper">\n' +
+        '    <span class="d2h-file-path-wrapper">\n' +
         '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
         '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
         '</svg></span>\n' +
+        '    <span class="d2h-file-path"></span>\n' +
         '    <span class="d2h-file-name">sample</span>\n' +
         '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
         '    </div>\n' +
@@ -406,10 +411,11 @@ describe('LineByLinePrinter', function() {
         '<div class="d2h-wrapper">\n' +
         '    <div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">\n' +
         '    <div class="d2h-file-header">\n' +
-        '    <span class="d2h-file-name-wrapper">\n' +
+        '    <span class="d2h-file-path-wrapper">\n' +
         '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
         '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
         '</svg></span>\n' +
+        '    <span class="d2h-file-path"></span>\n' +
         '    <span class="d2h-file-name">sample</span>\n' +
         '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
         '    </div>\n' +
diff --git a/test/side-by-side-printer-tests.js b/test/side-by-side-printer-tests.js
index b90e2c2..dcf11ba 100644
--- a/test/side-by-side-printer-tests.js
+++ b/test/side-by-side-printer-tests.js
@@ -231,10 +231,11 @@ describe('SideBySidePrinter', function() {
         '<div class="d2h-wrapper">\n' +
         '    <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">\n' +
         '    <div class="d2h-file-header">\n' +
-        '      <span class="d2h-file-name-wrapper">\n' +
+        '      <span class="d2h-file-path-wrapper">\n' +
         '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
         '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
         '</svg></span>\n' +
+        '    <span class="d2h-file-path"></span>\n' +
         '    <span class="d2h-file-name">sample</span>\n' +
         '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
         '    </div>\n' +
@@ -308,10 +309,11 @@ describe('SideBySidePrinter', function() {
         '<div class="d2h-wrapper">\n' +
         '    <div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">\n' +
         '    <div class="d2h-file-header">\n' +
-        '      <span class="d2h-file-name-wrapper">\n' +
+        '      <span class="d2h-file-path-wrapper">\n' +
         '    <span class="d2h-icon-wrapper"><svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">\n' +
         '    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>\n' +
         '</svg></span>\n' +
+        '    <span class="d2h-file-path"></span>\n' +
         '    <span class="d2h-file-name">sample</span>\n' +
         '    <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>\n' +
         '    </div>\n' +