diff --git a/grade/classes/output/export_action_bar.php b/grade/classes/output/export_action_bar.php
index 8186ad45cd4..2b96906f739 100644
--- a/grade/classes/output/export_action_bar.php
+++ b/grade/classes/output/export_action_bar.php
@@ -91,8 +91,8 @@ class export_action_bar extends action_bar {
         }
 
         // This navigation selector menu will contain the links to all available grade export plugin pages.
-        $exportsurlselect = new \url_select($exportsmenu, $this->exportactiveurl->out(false), null,
-            'gradesexportactionselect');
+        $exportsurlselect = new \core\output\select_menu('exportas', $exportsmenu, $this->exportactiveurl->out());
+        $exportsurlselect->set_label(get_string('exportas', 'grades'));
         $data['exportselector'] = $exportsurlselect->export_for_template($output);
 
         return $data;
diff --git a/grade/classes/output/import_action_bar.php b/grade/classes/output/import_action_bar.php
index e856c9df56a..123d63fda3d 100644
--- a/grade/classes/output/import_action_bar.php
+++ b/grade/classes/output/import_action_bar.php
@@ -91,8 +91,8 @@ class import_action_bar extends action_bar {
         }
 
         // This navigation selector menu will contain the links to all available grade export plugin pages.
-        $importsurlselect = new \url_select($importsmenu, $this->importactiveurl->out(false), null,
-            'gradesimportactionselect');
+        $importsurlselect = new \core\output\select_menu('importas', $importsmenu, $this->importactiveurl->out());
+        $importsurlselect->set_label(get_string('importas', 'grades'));
         $data['importselector'] = $importsurlselect->export_for_template($output);
 
         return $data;
diff --git a/grade/templates/export_action_bar.mustache b/grade/templates/export_action_bar.mustache
index 79b75ca45a7..9156d71b329 100644
--- a/grade/templates/export_action_bar.mustache
+++ b/grade/templates/export_action_bar.mustache
@@ -44,23 +44,25 @@
             "title": null
         },
         "exportselector": {
-            "id": "url_select56789",
-            "action": "https://example.com/get",
-            "formid": "gradesexportactionselect",
-            "sesskey": "sesskey",
-            "classes": "urlselect",
-            "label": "",
-            "helpicon": false,
-            "showbutton": null,
+            "name": "exportas",
+            "value": "https://example.com/grade/export/ods/index.php",
+            "baseid": "select-menu56789",
+            "label": "Export as",
+            "labelattributes": [
+                {
+                    "name": "class",
+                    "value": "font-weight-bold"
+                }
+            ],
+            "selectedoption": "OpenDocument spreadsheet",
             "options": [
                 {
                     "name": "OpenDocument spreadsheet",
-                    "value": "/grade/export/ods/index.php",
-                    "selected": true
+                    "value": "https://example.com/grade/export/ods/index.php",
+                    "selected": true,
+                    "id": "select-menu-option56789"
                 }
-            ],
-            "disabled": false,
-            "title": null
+            ]
         }
     }
 }}
@@ -73,8 +75,13 @@
         {{/generalnavselector}}
         {{#exportselector}}
             <div class="navitem">
-                {{>core/url_select}}
+                {{>core/select_menu}}
             </div>
+            {{#js}}
+                document.querySelector('#{{baseid}}').addEventListener('change', function(e) {
+                    window.location.href = e.target.value;
+                });
+            {{/js}}
         {{/exportselector}}
     </div>
 </div>
diff --git a/grade/templates/import_action_bar.mustache b/grade/templates/import_action_bar.mustache
index 7a1334f1c42..423277017d0 100644
--- a/grade/templates/import_action_bar.mustache
+++ b/grade/templates/import_action_bar.mustache
@@ -44,23 +44,25 @@
             "title": null
         },
         "importselector": {
-            "id": "url_select56789",
-            "action": "https://example.com/get",
-            "formid": "gradesimportactionselect",
-            "sesskey": "sesskey",
-            "classes": "urlselect",
-            "label": "",
-            "helpicon": false,
-            "showbutton": null,
+            "name": "importas",
+            "value": "https://example.com/grade/import/csv/index.php",
+            "baseid": "select-menu56789",
+            "label": "Import as",
+            "labelattributes": [
+                {
+                    "name": "class",
+                    "value": "font-weight-bold"
+                }
+            ],
+            "selectedoption": "CSV file",
             "options": [
                 {
                     "name": "CSV file",
-                    "value": "/grade/import/csv/index.php",
-                    "selected": true
+                    "value": "https://example.com/grade/import/csv/index.php",
+                    "selected": true,
+                    "id": "select-menu-option56789"
                 }
-            ],
-            "disabled": false,
-            "title": null
+            ]
         }
     }
 }}
@@ -73,8 +75,13 @@
         {{/generalnavselector}}
         {{#importselector}}
             <div class="navitem">
-                {{>core/url_select}}
+                {{>core/select_menu}}
             </div>
+            {{#js}}
+                document.querySelector('#{{baseid}}').addEventListener('change', function(e) {
+                window.location.href = e.target.value;
+                });
+            {{/js}}
         {{/importselector}}
     </div>
 </div>
diff --git a/grade/tests/behat/behat_grade.php b/grade/tests/behat/behat_grade.php
index b44ea5562a6..87148ca0477 100644
--- a/grade/tests/behat/behat_grade.php
+++ b/grade/tests/behat/behat_grade.php
@@ -349,7 +349,7 @@ class behat_grade extends behat_base {
      */
     public function i_navigate_to_import_page_in_the_course_gradebook($gradeimportoption) {
         $this->i_navigate_to_in_the_course_gradebook("More > Import");
-        $this->select_in_gradebook_navigation_selector($gradeimportoption, 'gradesimportactionselect');
+        $this->execute('behat_forms::i_set_the_field_to', [get_string('importas', 'grades'), $gradeimportoption]);
     }
 
     /**
@@ -364,7 +364,7 @@ class behat_grade extends behat_base {
      */
     public function i_navigate_to_export_page_in_the_course_gradebook($gradeexportoption) {
         $this->i_navigate_to_in_the_course_gradebook("More > Export");
-        $this->select_in_gradebook_navigation_selector($gradeexportoption, 'gradesexportactionselect');
+        $this->execute('behat_forms::i_set_the_field_to', [get_string('exportas', 'grades'), $gradeexportoption]);
     }
 
     /**
diff --git a/lang/en/grades.php b/lang/en/grades.php
index 1f58070512e..13ade09c371 100644
--- a/lang/en/grades.php
+++ b/lang/en/grades.php
@@ -212,6 +212,7 @@ $string['excluded_help'] = 'If ticked, the grade will not be included in any agg
 $string['expand'] = 'Expand category';
 $string['expandcriterion'] = 'Expand criterion';
 $string['export'] = 'Export';
+$string['exportas'] = 'Export as';
 $string['exportalloutcomes'] = 'Export all outcomes';
 $string['exportfeedback'] = 'Include feedback in export';
 $string['exportfeedback_desc'] = 'This can be overridden during export.';
@@ -400,6 +401,7 @@ $string['identifier'] = 'Identify user by';
 $string['idnumbers'] = 'ID numbers';
 $string['ignore'] = 'Ignore';
 $string['import'] = 'Import';
+$string['importas'] = 'Import as';
 $string['importcsv'] = 'Import CSV';
 $string['importcsv_help'] = 'Grades can be imported via a CSV file with format as follows: