diff --git a/httpdocs/templates/pages/components/datatable.template b/httpdocs/templates/pages/components/datatable.template
index ac171cb5b6..df467eb051 100644
--- a/httpdocs/templates/pages/components/datatable.template
+++ b/httpdocs/templates/pages/components/datatable.template
@@ -15,7 +15,19 @@
   const show_permalink = '{* show_permalink *}';
   const show_download = '{* show_download *}';
   const download_endpoint = '{* datatable.download.endpoint *}';
+  const navbar_context = {* navbar *};
 </script>
+<div id="navbar">
+<page-navbar
+	id="page_navbar"
+	:main_icon="navbar_context.main_icon"
+	:main_title="navbar_context.main_title"
+	:base_url="navbar_context.base_url"
+	:help_link="navbar_context.help_link"
+	:items_table="navbar_context.items_table"
+	@click_item="click_item">
+</page-navbar>
+</div>
 
 <div class='row'>
   <div class='col-12'>
@@ -319,6 +331,43 @@
       let epoch_begin = Number.parseInt(epoch_status.epoch_begin) + delta;
       ntopng_events_manager.emit_event(ntopng_events.EPOCH_CHANGE, { epoch_begin, epoch_end: now });
   }
+  function start_navbar() {
+      let navbar_vue_options = {
+	  components: {	  
+   	      'page-navbar': Vue.defineAsyncComponent( () => ntopng_vue_loader.loadModule(`${base_path}/vue/components/page-navbar.vue`, ntopng_vue_loader.loadOptions) ),
+	  },
+	  /**
+	   * First method called when the component is created.
+	   */
+	  created() {},
+	  mounted() {
+	  },
+	  data() {
+	      return {
+		  navbar_context: navbar_context,
+	      };
+	  },
+	  methods: {
+	      remove_filters_from_url: function() {
+	        let status = ntopng_status_manager.get_status();
+		let filters = status.filters;
+		if (filters == null) { return; }		
+		ntopng_url_manager.delete_params(filters.map((f) => f.id));
+	      },
+	      click_item: function(item) {
+	        ntopng_url_manager.set_key_to_url('page', item.page_name);
+	        let is_alert_stats_url = window.location.toString().match(/alert_stats.lua/) != null;
+	        if (is_alert_stats_url) {
+	          this.remove_filters_from_url();
+	        }
+		ntopng_url_manager.reload_url();
+	      },
+	  },
+      };
+      const navbar_vue = Vue.createApp(navbar_vue_options);
+      const vue_app = navbar_vue.mount("#navbar");
+      return vue_app;
+      }
 
   function start_range_picker() {
       let datatable_vue_options = {
@@ -367,7 +416,8 @@
       return vue_app;
   }
   
-  $(document).ready(async function(){ 
+  $(document).ready(async function(){
+  setTimeout(() => start_navbar(), 0);
       if (ntopng_url_manager.get_url_entry("ifid") == null) {
 	  ntopng_url_manager.set_key_to_url("ifid", default_ifid);
       }
@@ -550,21 +600,7 @@
 	// filters.push(filter);
 	// // notifies to all the updated status
 	// ntopng_status_manager.add_value_to_status("filters", filters);
-    }
-
-    // register to global event change status
-    await ntopng_sync.on_ready("range_picker");
-    let range_picker_is_ready = false;
-    let first_load_table = true;
-    ntopng_sync.on_ready("range_picker").then(() => { range_picker_is_ready = true; });
-    
-      ntopng_status_manager.on_status_change("datatable", (new_status) => {
-      if (!first_load_table && !range_picker_is_ready) { return; }
-	let url_params = ntopng_url_manager.get_url_params();
-	reloadTable($table, url_params);
-	first_load_table = false;
-    }, true);
-    
+    }    
 
     ChartWidget.registerEventCallback("{{ chart.name }}", 'zoomed', async (chartContext, { xaxis, yaxis }) => {
         // the timestamps are in milliseconds, convert them into seconds
@@ -618,6 +654,19 @@
         })
     });
 
+    // register to global event change status
+    await ntopng_sync.on_ready("range_picker");
+    let range_picker_is_ready = false;
+    let first_load_table = true;
+    //ntopng_sync.on_ready("range_picker").then(() => { range_picker_is_ready = true; });
+    
+    ntopng_status_manager.on_status_change("datatable", (new_status) => {
+      //if (!first_load_table && !range_picker_is_ready) { return; }
+	let url_params = ntopng_url_manager.get_url_params();
+	reloadTable($table, url_params);
+	first_load_table = false;
+    }, false);
+
     {% if extra_js then %}
     {* template_utils.gen(extra_js, extra_js_context) *}
     {% end %}
diff --git a/httpdocs/templates/pages/components/db-analysis.template b/httpdocs/templates/pages/components/db-analysis.template
index 53cc4be792..2b59650ca1 100644
--- a/httpdocs/templates/pages/components/db-analysis.template
+++ b/httpdocs/templates/pages/components/db-analysis.template
@@ -12,8 +12,21 @@
 <script type='text/javascript'>
   const base_path = '{* ntop.getHttpPrefix() *}';
   const default_ifid = '{* interface.getId() *}';
+  const navbar_context = {* navbar *};
 </script>
 
+<div id="navbar">
+<page-navbar
+	id="page_navbar"
+	:main_icon="navbar_context.main_icon"
+	:main_title="navbar_context.main_title"
+	:base_url="navbar_context.base_url"
+	:help_link="navbar_context.help_link"
+	:items_table="navbar_context.items_table"
+	@click_item="click_item">
+</page-navbar>
+</div>
+
 <div class='row'>
 
     <div class='col-12'>
@@ -21,7 +34,7 @@
       <div class="w-100">
 	<div clas="range-container d-flex flex-wrap">
 	  <div class="range-picker d-flex m-auto flex-wrap" id="datatable-vue">
-	    <range-picker ref="range-picker-vue" :id="id_range_picker"></range-picker>
+	    <range-picker ref="range-picker-vue" id="range_picker"></range-picker>
 	  </div>
 	</div>
       </div>
@@ -69,6 +82,35 @@
   let table = undefined;
   let VUE_APP;
 
+  function start_navbar() {
+      let navbar_vue_options = {
+	  components: {	  
+   	      'page-navbar': Vue.defineAsyncComponent( () => ntopng_vue_loader.loadModule(`${base_path}/vue/components/page-navbar.vue`, ntopng_vue_loader.loadOptions) ),
+	  },
+	  /**
+	   * First method called when the component is created.
+	   */
+	  created() {},
+	  mounted() {
+	  },
+	  data() {
+	      return {
+		  navbar_context: navbar_context,
+	      };
+	  },
+	  methods: {
+	      click_item: function(item) {
+	      ntopng_url_manager.set_key_to_url('page', item.page_name);
+	      ntopng_url_manager.set_key_to_url('query_preset', '');
+	      ntopng_url_manager.reload_url();
+	      },
+	  },
+      };
+      const navbar_vue = Vue.createApp(navbar_vue_options);
+      const vue_app = navbar_vue.mount("#navbar");
+      return vue_app;
+      }
+
   function start_range_picker() {
       let datatable_vue_options = {
 	  props: {
@@ -84,8 +126,6 @@
 	  mounted() {},
 	  data() {
 	      return {
-		  id_range_picker: `range_picker`,
-		  i18n: (t) => { return i18n(t); },
 	      };
 	  },
 	  methods: {},
@@ -96,6 +136,7 @@
   }
 
   $(document).ready(async function(){
+      setTimeout(() => start_navbar(), 0);
       if (ntopng_url_manager.get_url_entry("ifid") == null) {
 	  ntopng_url_manager.add_obj_to_url({ifid: default_ifid});
       }
@@ -109,7 +150,6 @@
       VUE_APP = start_range_picker();
       
       await ntopng_sync.on_ready("range_picker");
-
       NtopUtils.hideOverlays();
 
     ntopng_status_manager.on_status_change("datatable", (new_status) => {
diff --git a/httpdocs/vue/components/page-navbar.vue b/httpdocs/vue/components/page-navbar.vue
new file mode 100644
index 0000000000..ca79553b15
--- /dev/null
+++ b/httpdocs/vue/components/page-navbar.vue
@@ -0,0 +1,72 @@
+<template>
+<nav class="navbar navbar-shadow navbar-expand-lg navbar-light bg-light px-2 mb-2">
+  <span class="me-1 text-nowrap" style="font-size: 1.1rem;">
+    <i :class="main_icon"></i>
+    {{main_title}}
+  </span>
+  <span class="text-muted ms-1 d-none d-lg-inline d-md-none">|</span>
+  <button class="navbar-toggler" type="button">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse scroll-x" id="navbarNav">
+    <ul class="navbar-nav">
+      <template v-for="item in items_table">
+	<template v-if="item.active">
+	  <li  @click="this.$emit('click_item', item)" :class="{ 'active': item.active }" class="nav-item nav-link">
+	    <span v-if="item.badge_num > 0" class="badge rounded-pill bg-dark" style="float:right;margin-bottom:-10px;">{{ item.badge_num }}</span>
+	    <b><i :class="item.icon"></i>
+	      {{item.label}}
+	    </b>
+	  </li>
+	</template>
+	<template v-else>
+	  <a @click="this.$emit('click_item', item)" href="#" class="nav-item nav-link">
+	    <span v-if="item.badge_num > 0" class="badge rounded-pill bg-dark" style="float:right;margin-bottom:-10px;">{{ item.badge_num }}</span>
+	    <i :class="item.icon"></i>
+	      {{item.label}}
+	  </a>
+	</template>
+	
+	
+      </template>
+      </ul>
+      <ul class="navbar-nav ms-auto">
+        <a href="javascript:history.back()" class="nav-item nav-link text-muted">
+          <i class="fas fa-arrow-left"></i>
+	</a>
+        <a target="_newtab" :href="help_link" class="nav-item nav-link text-muted">
+          <i class="fas fa-question-circle"></i>
+        </a>
+      </ul>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+    components: {
+    },
+    props: {
+	id: String,
+	main_title: String,
+	main_icon: String,
+	help_link: String,
+	items_table: Array,
+    },
+    emits: ["click_item"],
+    /** This method is the first method of the component called, it's called before html template creation. */
+    created() {
+    },
+    data() {
+	return {
+	    //i18n: (t) => i18n(t),
+	};
+    },
+    /** This method is the first method called after html template creation. */
+    mounted() {
+	ntopng_sync.ready(this.$props["id"]);
+    },
+    methods: {
+    },
+}
+</script>
diff --git a/httpdocs/vue/components/range-picker.vue b/httpdocs/vue/components/range-picker.vue
index 904ad37f6e..900d31760b 100644
--- a/httpdocs/vue/components/range-picker.vue
+++ b/httpdocs/vue/components/range-picker.vue
@@ -145,7 +145,10 @@ const load_filters_data = async function() {
     	    let options_string = value.split(",");
 	    options_string.forEach((opt_stirng) => {
     		let [value, operator] = opt_stirng.split(";");
-		if (operator == null || value == null || operator == "") {
+		if (
+		    operator == null || value == null || operator == ""
+		    || (filter_def.options != null && filter_def.options.find((opt) => opt.value == value) == null)
+		   ) {
 		    return;
 		}
 		filters.push({id: filter_def.id, operator: operator, value: value});
@@ -197,7 +200,7 @@ async function set_query_preset(range_picker_vue) {
 	});
     }
     if (range_picker_vue.query_presets == null || range_picker_vue.query_presets == "") {
-	range_picker_vue.query_presets = query_preset[0].value;
+	range_picker_vue.query_presets = query_preset[0].value;	
 	ntopng_url_manager.set_key_to_url("query_preset", query_preset[0].value);
     }
     range_picker_vue.query_preset = query_preset;
@@ -278,7 +281,7 @@ export default {
 	    let filters = status.filters;
 	    if (filters == null) { return; }
 	    // delete all previous filter
-	    ntopng_url_manager.delete_params(this.last_filters.map((f) => f.id));
+	    ntopng_url_manager.delete_params(FILTERS_CONST.map((f) => f.id));
 	    TAGIFY.tagify.removeAllTags();
 	    let filters_object = get_filters_object(filters);
 	    ntopng_url_manager.add_obj_to_url(filters_object);
diff --git a/scripts/lua/alert_stats.lua b/scripts/lua/alert_stats.lua
index d56fa60d79..ed1f8681be 100644
--- a/scripts/lua/alert_stats.lua
+++ b/scripts/lua/alert_stats.lua
@@ -300,7 +300,7 @@ dofile(dirs.installdir .. "/scripts/lua/inc/menu.lua")
 
 local url = ntop.getHttpPrefix() .. "/lua/alert_stats.lua?"
 
-page_utils.print_navbar(i18n("alerts_dashboard.alerts"), url, pages)
+-- page_utils.print_navbar(i18n("alerts_dashboard.alerts"), url, pages)
 
 widget_gui_utils.register_timeseries_area_chart(CHART_NAME, 0, {
    Datasource(endpoint_ts, {
@@ -718,6 +718,7 @@ local context = {
        name = CHART_NAME
    },
    datatable = datatable,
+   navbar = json.encode(page_utils.get_navbar_context(i18n("alerts_dashboard.alerts"), url, pages)),
    extra_js = "pages/alerts/datatable.js.template",
    extra_js_context = {
        ifid = ifid,
diff --git a/scripts/lua/modules/page_utils.lua b/scripts/lua/modules/page_utils.lua
index 34fa3b20b3..285e0d244c 100644
--- a/scripts/lua/modules/page_utils.lua
+++ b/scripts/lua/modules/page_utils.lua
@@ -407,6 +407,23 @@ end
 
 -- #################################
 
+function page_utils.get_navbar_context(title, base_url, items_table, label_url, back_url)
+   local help_link = page_utils.menu_entries[active_entry].help_link or nil
+   local icon = page_utils.menu_sections[active_section].icon or ""
+
+   local navbar = {
+   	 main_icon   = icon,
+         main_title  = title,
+         base_url    = base_url,
+         items_table = items_table,
+         label_url   = label_url,
+         back_url    = back_url,
+         help_link   = help_link
+   }
+   return navbar
+end
+-- #################################
+
 function page_utils.print_navbar(title, base_url, items_table, label_url, back_url)
    local help_link = page_utils.menu_entries[active_entry].help_link or nil
    local icon = page_utils.menu_sections[active_section].icon or ""