diff --git a/docs-web/src/main/webapp/src/app/docs/controller/document/Document.js b/docs-web/src/main/webapp/src/app/docs/controller/document/Document.js
index e5e45180..4276a661 100644
--- a/docs-web/src/main/webapp/src/app/docs/controller/document/Document.js
+++ b/docs-web/src/main/webapp/src/app/docs/controller/document/Document.js
@@ -338,4 +338,27 @@ angular.module('docs').controller('Document', function ($scope, $rootScope, $tim
 
     return _.pluck(children, 'name').join(', ') + (tag.children.length > 2 ? '...' : '');
   };
+
+  /**
+   * Add a tag in the current navigation context.
+   */
+  $scope.addTagHere = function () {
+    $uibModal.open({
+      templateUrl: 'partial/docs/document.add.tag.html',
+      controller: 'DocumentModalAddTag'
+    }).result.then(function (tag) {
+      if (tag === null) {
+        return;
+      }
+
+      // Create the tag
+      tag.parent = $scope.navigatedTag ? $scope.navigatedTag.id : undefined;
+      Restangular.one('tag').put(tag).then(function (data) {
+        // Add the new tag to the list
+        tag.id = data.id;
+        tag.children = [];
+        $scope.tags.push(tag);
+      })
+    });
+  };
 });
\ No newline at end of file
diff --git a/docs-web/src/main/webapp/src/app/docs/controller/document/DocumentModalAddTag.js b/docs-web/src/main/webapp/src/app/docs/controller/document/DocumentModalAddTag.js
new file mode 100644
index 00000000..e78d0c8f
--- /dev/null
+++ b/docs-web/src/main/webapp/src/app/docs/controller/document/DocumentModalAddTag.js
@@ -0,0 +1,11 @@
+'use strict';
+
+/**
+ * Document modal add tag controller.
+ */
+angular.module('docs').controller('DocumentModalAddTag', function ($scope, $uibModalInstance) {
+  $scope.tag = { name: '', color: '#3a87ad' };
+  $scope.close = function(tag) {
+    $uibModalInstance.close(tag);
+  }
+});
\ No newline at end of file
diff --git a/docs-web/src/main/webapp/src/app/docs/controller/tag/Tag.js b/docs-web/src/main/webapp/src/app/docs/controller/tag/Tag.js
index b652b868..86338a63 100644
--- a/docs-web/src/main/webapp/src/app/docs/controller/tag/Tag.js
+++ b/docs-web/src/main/webapp/src/app/docs/controller/tag/Tag.js
@@ -3,7 +3,7 @@
 /**
  * Tag controller.
  */
-angular.module('docs').controller('Tag', function($scope, Restangular, $state) {
+angular.module('docs').controller('Tag', function($scope, Restangular) {
   $scope.tag = { name: '', color: '#3a87ad' };
 
   // Retrieve tags
diff --git a/docs-web/src/main/webapp/src/index.html b/docs-web/src/main/webapp/src/index.html
index b63cd652..f6b70f99 100644
--- a/docs-web/src/main/webapp/src/index.html
+++ b/docs-web/src/main/webapp/src/index.html
@@ -66,6 +66,7 @@
     <script src="app/docs/controller/document/DocumentViewActivity.js" type="text/javascript"></script>
     <script src="app/docs/controller/document/DocumentModalShare.js" type="text/javascript"></script>
     <script src="app/docs/controller/document/DocumentModalPdf.js" type="text/javascript"></script>
+    <script src="app/docs/controller/document/DocumentModalAddTag.js" type="text/javascript"></script>
     <script src="app/docs/controller/document/FileView.js" type="text/javascript"></script>
     <script src="app/docs/controller/document/FileModalView.js" type="text/javascript"></script>
     <script src="app/docs/controller/tag/Tag.js" type="text/javascript"></script>
diff --git a/docs-web/src/main/webapp/src/partial/docs/document.add.tag.html b/docs-web/src/main/webapp/src/partial/docs/document.add.tag.html
new file mode 100644
index 00000000..993c9724
--- /dev/null
+++ b/docs-web/src/main/webapp/src/partial/docs/document.add.tag.html
@@ -0,0 +1,19 @@
+<div class="modal-header">
+  <h3>{{ 'tag.new_tag' | translate }}</h3>
+</div>
+<form name="tagForm" novalidate>
+  <div class="modal-body">
+      <p class="input-group" ng-class="{ 'has-error': !tagForm.name.$valid && tagForm.$dirty }">
+        <span colorpicker class="input-group-addon btn btn-default" data-color="#3a87ad" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span>
+        <input type="text" name="name" ng-attr-placeholder="{{ 'tag.new_tag' | translate }}" class="form-control"
+               ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1' }">
+      </p>
+      <span class="text-danger" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</span>
+  </div>
+  <div class="modal-footer">
+    <button ng-click="close(tag)" ng-disabled="!tagForm.$valid" class="btn btn-primary">
+      <span class="fas fa-plus"></span> {{ 'add' | translate }}
+    </button>
+    <button ng-click="close(null)" class="btn btn-default">{{ 'cancel' | translate }}</button>
+  </div>
+</form>
diff --git a/docs-web/src/main/webapp/src/partial/docs/document.html b/docs-web/src/main/webapp/src/partial/docs/document.html
index 7580c0d9..aa13682d 100644
--- a/docs-web/src/main/webapp/src/partial/docs/document.html
+++ b/docs-web/src/main/webapp/src/partial/docs/document.html
@@ -174,12 +174,22 @@
                 ng-if="navigatedTag">
           <span class="fas fa-chevron-up"></span>
         </button>
+        <!-- Toggle navigation -->
         <button class="btn btn-default" ng-click="navigationToggle()"
                 ng-class="{ active: navigationEnabled }"
                 uib-tooltip="{{ 'document.toggle_navigation' | translate }}"
                 tooltip-append-to-body="true">
           <span class="far" ng-class="{ 'fa-folder-open': navigationEnabled, 'fa-folder': !navigationEnabled }"></span>
         </button>
+        <!-- Add a tag here -->
+        <button class="btn btn-primary btn-add-tag"
+                uib-tooltip="{{ 'tag.new_tag' | translate }}"
+                ng-click="addTagHere()">
+          <span>
+            <i class="fas fa-tag"></i>
+            <i class="fas fa-plus"></i>
+          </span>
+        </button>
       </div>
 
       <!-- Current folder -->
diff --git a/docs-web/src/main/webapp/src/partial/docs/tag.html b/docs-web/src/main/webapp/src/partial/docs/tag.html
index addc048f..a2f3e2dc 100644
--- a/docs-web/src/main/webapp/src/partial/docs/tag.html
+++ b/docs-web/src/main/webapp/src/partial/docs/tag.html
@@ -20,7 +20,7 @@
             ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1' }">
           <span class="input-group-addon btn btn-primary" ng-disabled="!tagForm.$valid" ng-click="addTag()">{{ 'add' | translate }}</span>
         </p>
-        <span class="help-block" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</span>
+        <span class="text-danger" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</span>
       </form>
 
       <ul class="tag-tree">
diff --git a/docs-web/src/main/webapp/src/style/colorpicker.css b/docs-web/src/main/webapp/src/style/colorpicker.css
index 1a34503a..84c78ee5 100644
--- a/docs-web/src/main/webapp/src/style/colorpicker.css
+++ b/docs-web/src/main/webapp/src/style/colorpicker.css
@@ -62,6 +62,7 @@
   min-width: 120px;
   margin-top: 1px;
   border-radius: 4px;
+  z-index: 1100;
 }
 .colorpicker:after {
   clear: both;
diff --git a/docs-web/src/main/webapp/src/style/main.less b/docs-web/src/main/webapp/src/style/main.less
index e552057d..3172d965 100644
--- a/docs-web/src/main/webapp/src/style/main.less
+++ b/docs-web/src/main/webapp/src/style/main.less
@@ -92,6 +92,16 @@ ul.tag-tree {
   }
 }
 
+// Button to add tag from the navigation
+.btn-add-tag {
+  .fa-plus {
+    font-size: 70%;
+    position: absolute;
+    right: 7px;
+    top: 5px;
+  }
+}
+
 // Documents list
 .table-documents {
   margin-top: 18px !important;