diff --git a/src/ui/public/utils/__tests__/slugify_id.js b/src/ui/public/utils/__tests__/slugify_id.js
index 18541030f0c4d..57f7f2181501b 100644
--- a/src/ui/public/utils/__tests__/slugify_id.js
+++ b/src/ui/public/utils/__tests__/slugify_id.js
@@ -9,18 +9,22 @@ describe('slugifyId()', function () {
     ['test?test', 'test-questionmark-test'],
     ['test=test', 'test-equal-test'],
     ['test&test', 'test-ampersand-test'],
+    ['test%test', 'test-percent-test'],
     ['test / test', 'test-slash-test'],
     ['test ? test', 'test-questionmark-test'],
     ['test = test', 'test-equal-test'],
     ['test & test', 'test-ampersand-test'],
+    ['test % test', 'test-percent-test'],
     ['test / ^test', 'test-slash-^test'],
     ['test ?  test', 'test-questionmark-test'],
     ['test =  test', 'test-equal-test'],
     ['test &  test', 'test-ampersand-test'],
+    ['test %  test', 'test-percent-test'],
     ['test/test/test', 'test-slash-test-slash-test'],
     ['test?test?test', 'test-questionmark-test-questionmark-test'],
     ['test&test&test', 'test-ampersand-test-ampersand-test'],
-    ['test=test=test', 'test-equal-test-equal-test']
+    ['test=test=test', 'test-equal-test-equal-test'],
+    ['test%test%test', 'test-percent-test-percent-test']
   ];
 
   _.each(fixtures, function (fixture) {
diff --git a/src/ui/public/utils/slugify_id.js b/src/ui/public/utils/slugify_id.js
index b0f1920e501e6..0894d9356593e 100644
--- a/src/ui/public/utils/slugify_id.js
+++ b/src/ui/public/utils/slugify_id.js
@@ -6,7 +6,8 @@ export default function (id) {
     '/' : '-slash-',
     '\\?' : '-questionmark-',
     '\\&' : '-ampersand-',
-    '=' : '-equal-'
+    '=' : '-equal-',
+    '%' : '-percent-'
   };
   _.each(trans, function (val, key) {
     let regex = new RegExp(key, 'g');