diff --git a/client/galaxy/scripts/components/Masthead/Masthead.test.js b/client/galaxy/scripts/components/Masthead/Masthead.test.js
index e90fa9448c1a..327e500546e9 100644
--- a/client/galaxy/scripts/components/Masthead/Masthead.test.js
+++ b/client/galaxy/scripts/components/Masthead/Masthead.test.js
@@ -1,4 +1,4 @@
-import Masthead from "./Masthead.vue";
+import { default as Masthead, __RewireAPI__ as rewire } from "./Masthead.vue";
 import { mount, createLocalVue } from "@vue/test-utils";
 import Scratchbook from "layout/scratchbook";
 
@@ -7,8 +7,25 @@ describe("Masthead.vue", () => {
     let localVue;
     let scratchbook;
     let quotaRendered, quotaEl;
+    let tabs;
+
+    function stubFetchMenu() {
+        return tabs;
+    }
+
+    function stubLoadWebhooks(items) {
+        items.push({
+            id: "extension",
+            title: "Extension Point",
+            menu: false,
+            url: "extension_url",
+        });
+    }
 
     beforeEach(() => {
+        rewire.__Rewire__("fetchMenu", stubFetchMenu);
+        rewire.__Rewire__("loadWebhookMenuItems", stubLoadWebhooks);
+
         localVue = createLocalVue();
         quotaRendered = false;
         quotaEl = null;
@@ -22,7 +39,7 @@ describe("Masthead.vue", () => {
             },
         };
 
-        const tabs = [
+        tabs = [
             // Main Analysis Tab..
             {
                 id: "analysis",
@@ -51,16 +68,15 @@ describe("Masthead.vue", () => {
             tabs.push(x);
             return x;
         };
-        scratchbook = new Scratchbook({
-            collection: tabs,
-        });
-        const frames = scratchbook.getFrames();
+        scratchbook = new Scratchbook({});
+        const mastheadState = {
+            quotaMeter,
+            frame: scratchbook,
+        };
 
         wrapper = mount(Masthead, {
             propsData: {
-                quotaMeter,
-                frames,
-                tabs,
+                mastheadState,
                 activeTab,
                 appRoot: "prefix/",
             },
@@ -69,13 +85,23 @@ describe("Masthead.vue", () => {
         });
     });
 
+    it("should disable brand when displayGalaxyBrand is true", async () => {
+        expect(wrapper.find(".navbar-brand-title").text()).to.equals("Galaxy");
+        wrapper.setProps({ brand: "Foo " });
+        await localVue.nextTick();
+        expect(wrapper.find(".navbar-brand-title").text()).to.equals("Galaxy Foo");
+        wrapper.setProps({ displayGalaxyBrand: false });
+        await localVue.nextTick();
+        expect(wrapper.find(".navbar-brand-title").text()).to.equals("Foo");
+    });
+
     it("set quota element and renders it", () => {
         expect(quotaEl).to.not.equals(null);
         expect(quotaRendered).to.equals(true);
     });
 
     it("should render simple tab item links", () => {
-        expect(wrapper.findAll("li.nav-item").length).to.equals(5);
+        expect(wrapper.findAll("li.nav-item").length).to.equals(6);
         // Ensure specified link title respected.
         expect(wrapper.find("#analysis a").text()).to.equals("Analyze");
         expect(wrapper.find("#analysis a").attributes("href")).to.equals("prefix/root");
@@ -109,4 +135,8 @@ describe("Masthead.vue", () => {
         // await localVue.nextTick();
         // expect(scratchbook.active).to.equals(true);
     });
+
+    it("should load webhooks on creation", async () => {
+        expect(wrapper.find("#extension a").text()).to.equals("Extension Point");
+    });
 });
diff --git a/client/galaxy/scripts/components/Masthead/Masthead.vue b/client/galaxy/scripts/components/Masthead/Masthead.vue
index f3e27aaad4e8..b8b4383fb975 100644
--- a/client/galaxy/scripts/components/Masthead/Masthead.vue
+++ b/client/galaxy/scripts/components/Masthead/Masthead.vue
@@ -21,7 +21,6 @@
                 :appRoot="appRoot"
                 :Galaxy="Galaxy"
                 v-show="!(tab.hidden === undefined ? false : tab.hidden)"
-                @updateScratchbookTab="updateScratchbookTab"
             >
             </masthead-item>
         </b-navbar-nav>
@@ -33,12 +32,17 @@
 <script>
 import { BNavbar, BNavbarBrand, BNavbarNav } from "bootstrap-vue";
 import MastheadItem from "./MastheadItem";
-import _ from "underscore";
+import { fetchMenu } from "layout/menu";
+import { loadWebhookMenuItems } from "./_webhooks";
 
 export default {
     name: "Masthead",
     props: {
-        brandTitle: {
+        displayGalaxyBrand: {
+            type: Boolean,
+            default: true,
+        },
+        brand: {
             type: String,
         },
         brandLink: {
@@ -47,16 +51,10 @@ export default {
         brandImage: {
             type: String,
         },
-        quotaMeter: {
-            type: Object,
-        },
         activeTab: {
             type: String,
         },
-        tabs: {
-            type: Array,
-        },
-        frames: {
+        mastheadState: {
             type: Object,
         },
         appRoot: {
@@ -65,6 +63,9 @@ export default {
         Galaxy: {
             type: Object,
         },
+        menuOptions: {
+            type: Object,
+        },
     },
     components: {
         BNavbar,
@@ -73,41 +74,69 @@ export default {
         MastheadItem,
     },
     methods: {
-        updateScratchbookTab(tab) {
-            _.each(this.tabs, (tab, i) => {
-                if (tab.id === "enable-scratchbook") {
-                    tab.active = !tab.active;
-
-                    this.$set(this.tabs, i, {
-                        ...tab,
-                        toggle: tab.active,
-                        show_note: tab.active,
-                        note_cls: tab.active && "fa fa-check",
-                    });
-                }
-            });
+        addItem(item) {
+            this.tabs.push(item);
+        },
+        highlight(activeTab) {
+            this.activeTab = activeTab;
+        },
+        _tabToJson(el) {
+            const defaults = {
+                visible: true,
+                target: "_parent",
+            };
+            let asJson;
+            if (el.toJSON instanceof Function) {
+                asJson = el.toJSON();
+            } else {
+                asJson = el;
+            }
+            return Object.assign({}, defaults, asJson);
+        },
+        _reflectScratchbookFrames() {
+            const frames = this.mastheadState.frame.getFrames();
+            const tab = this.mastheadState.frame.buttonLoad;
+            tab.toggle = frames.visible;
+            tab.icon = (frames.visible && "fa-eye") || "fa-eye-slash";
+        },
+    },
+    data() {
+        return {
+            baseTabs: [],
+            extensionTabs: [],
+        };
+    },
+    computed: {
+        brandTitle() {
+            let brandTitle = this.displayGalaxyBrand ? "Galaxy " : "";
+            if (this.brand) {
+                brandTitle += this.brand;
+            }
+            return brandTitle;
+        },
+        tabs() {
+            const scratchbookTabs = [this.mastheadState.frame.buttonActive, this.mastheadState.frame.buttonLoad];
+            const tabs = [].concat(this.baseTabs, scratchbookTabs, this.extensionTabs);
+            return tabs.map(this._tabToJson);
         },
     },
+    created() {
+        this.baseTabs = fetchMenu(this.menuOptions);
+        loadWebhookMenuItems(this.extensionTabs);
+    },
     mounted() {
-        this.quotaMeter.setElement(this.$refs["quota-meter-container"]);
-        this.quotaMeter.render();
-
-        const idx = _.findIndex(this.tabs, { id: "show-scratchbook" });
-        this.frames
+        this.mastheadState.quotaMeter.setElement(this.$refs["quota-meter-container"]);
+        this.mastheadState.quotaMeter.render();
+        const frames = this.mastheadState.frame.getFrames();
+        frames
             .on("add remove", () => {
-                this.$set(this.tabs, idx, {
-                    ...this.tabs[idx],
-                    note: this.frames.length(),
-                    visible: this.frames.length() > 0,
-                    show_note: this.frames.length() > 0,
-                });
+                const tab = this.mastheadState.frame.buttonLoad;
+                tab.note = String(frames.length());
+                tab.visible = frames.length() > 0;
+                tab.show_note = frames.length() > 0;
             })
             .on("show hide", () => {
-                this.$set(this.tabs, idx, {
-                    ...this.tabs[idx],
-                    toggle: this.frames.visible,
-                    icon: (this.frames.visible && "fa-eye") || "fa-eye-slash",
-                });
+                this._reflectScratchbookFrames();
             });
     },
 };
diff --git a/client/galaxy/scripts/components/Masthead/MastheadItem.vue b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
index 90c0ca4d8f25..f24839d4257f 100644
--- a/client/galaxy/scripts/components/Masthead/MastheadItem.vue
+++ b/client/galaxy/scripts/components/Masthead/MastheadItem.vue
@@ -103,6 +103,7 @@ export default {
             };
         },
         iconClasses() {
+            console.log("in iconClasses...");
             return Object.fromEntries([
                 ["fa", true],
                 ["toggle", this.tab.toggle],
@@ -118,13 +119,6 @@ export default {
             return document.getElementById("galaxy_main");
         },
     },
-    created() {
-        if (this.tab.onbeforeunload) {
-            document.addEventListener("beforeunload", () => {
-                this.tab.onbeforeunload();
-            });
-        }
-    },
     mounted() {
         if (this.galaxyIframe) {
             this.galaxyIframe.addEventListener("load", this.iframeListener);
diff --git a/client/galaxy/scripts/components/Masthead/_webhooks.js b/client/galaxy/scripts/components/Masthead/_webhooks.js
new file mode 100644
index 000000000000..d5667d05f3d0
--- /dev/null
+++ b/client/galaxy/scripts/components/Masthead/_webhooks.js
@@ -0,0 +1,28 @@
+import Webhooks from "mvc/webhooks";
+import Utils from "utils/utils";
+
+export function loadWebhookMenuItems(items) {
+    Webhooks.load({
+        type: "masthead",
+        callback: function (webhooks) {
+            webhooks.each((model) => {
+                const webhook = model.toJSON();
+                if (webhook.activate) {
+                    const obj = {
+                        id: webhook.id,
+                        icon: webhook.config.icon,
+                        url: webhook.config.url,
+                        tooltip: webhook.config.tooltip,
+                        /*jslint evil: true */
+                        onclick: webhook.config.function && new Function(webhook.config.function),
+                        visible: true,
+                        target: "_parent",
+                    };
+                    items.push(obj);
+                    // Append masthead script and styles to Galaxy main
+                    Utils.appendScriptStyle(webhook);
+                }
+            });
+        },
+    });
+}
diff --git a/client/galaxy/scripts/components/Masthead/initMasthead.js b/client/galaxy/scripts/components/Masthead/initMasthead.js
index 796fa052e15c..76480eb44730 100644
--- a/client/galaxy/scripts/components/Masthead/initMasthead.js
+++ b/client/galaxy/scripts/components/Masthead/initMasthead.js
@@ -2,31 +2,20 @@
  * Temporary function used to mount the masthead inside the current application.
  * This function is exposed with the rest of the page-globals in bundledEntries.
  */
-// import Vue from "vue";
-// import Masthead from "./Masthead";
-import Masthead from "../../layout/masthead";
+import { MastheadState, mountMasthead } from "../../layout/masthead";
 import $ from "jquery";
 
 export function initMasthead(config, container) {
     console.log("initMasthead");
 
-    const masthead = new Masthead.View(config);
-    masthead.render();
-
     const $masthead = $("#masthead");
 
     if (config.hide_masthead) {
         $masthead.remove();
     } else {
         if (container) {
-            $(container).replaceWith(masthead.el);
+            const mastheadState = new MastheadState();
+            mountMasthead(container, config, mastheadState);
         }
     }
-
-    // const Component = Vue.extend(Masthead);
-    // return new Component({
-    //     props: Object.keys(config),
-    //     propsData: config,
-    //     el: container
-    // });
 }
diff --git a/client/galaxy/scripts/layout/masthead.js b/client/galaxy/scripts/layout/masthead.js
index f88d0dbd1fe4..3b15f737ada6 100644
--- a/client/galaxy/scripts/layout/masthead.js
+++ b/client/galaxy/scripts/layout/masthead.js
@@ -1,6 +1,4 @@
 import $ from "jquery";
-import Backbone from "backbone";
-import Menu from "layout/menu";
 import Scratchbook from "layout/scratchbook";
 import QuotaMeter from "mvc/user/user-quotameter";
 import { getGalaxyInstance } from "app";
@@ -8,30 +6,14 @@ import Masthead from "../components/Masthead/Masthead";
 import { mountVueComponent } from "../utils/mountVueComponent";
 import { getAppRoot } from "onload/loadConfig";
 
-/** Masthead **/
-const View = Backbone.View.extend({
-    initialize: function (options) {
-        const Galaxy = getGalaxyInstance();
-        const self = this;
-        this.options = options;
+export class MastheadState {
+    // Used to be a Backbone View - not pretty but keep all window wide listeners,
+    // global state, etc... related to the Masthead here to keep the VueJS component
+    // more isolated, testable, etc.. (clean)
 
-        // build tabs
-        this.collection = new Menu.Collection();
-        this.collection
-            .on("dispatch", (callback) => {
-                self.collection.each((m) => {
-                    callback(m);
-                });
-            })
-            .fetch(this.options);
-
-        // highlight initial active view
-        this.highlight(options.active_view); // covered
-
-        // scratchbook
-        Galaxy.frame = this.frame = new Scratchbook({
-            collection: this.collection,
-        });
+    constructor(Galaxy = null) {
+        Galaxy = Galaxy || getGalaxyInstance();
+        Galaxy.frame = this.frame = new Scratchbook();
 
         // set up the quota meter (And fetch the current user data from trans)
         // add quota meter to masthead
@@ -52,54 +34,27 @@ const View = Backbone.View.extend({
                 }
             })
             .on("beforeunload", () => {
-                let text = "";
-                self.collection.each((model) => {
-                    const q = model.get("onbeforeunload") && model.get("onbeforeunload")();
-                    if (q) {
-                        text += `${q} `;
-                    }
-                });
-                if (text !== "") {
+                const text = this.frame.beforeUnload();
+                if (text) {
                     return text;
                 }
             });
-    },
-
-    render: function () {
-        const el = document.createElement("div");
-        this.el.appendChild(el); // use this.el directly when feature parity is accomplished
-        let brandTitle = this.options.display_galaxy_brand ? "Galaxy " : "";
-        if (this.options.brand) {
-            brandTitle += this.options.brand;
-        }
-        const tabs = this.collection.models.map((el) => {
-            return el.toJSON();
-        });
-        mountVueComponent(Masthead)(
-            {
-                brandTitle: brandTitle,
-                brandLink: this.options.logo_url,
-                brandImage: this.options.logo_src,
-                quotaMeter: this.quotaMeter,
-                activeTab: this.activeView,
-                tabs: tabs,
-                frames: this.frame.getFrames(),
-                appRoot: getAppRoot(),
-                Galaxy: getGalaxyInstance(),
-            },
-            el
-        );
-        return this;
-    },
-
-    highlight: function (id) {
-        this.activeView = id;
-        this.collection.forEach(function (model) {
-            model.set("active", model.id == id);
-        });
-    },
-});
-
-export default {
-    View: View,
-};
+    }
+}
+
+export function mountMasthead(el, options, mastheadState) {
+    return mountVueComponent(Masthead)(
+        {
+            el: el,
+            mastheadState: mastheadState,
+            displayGalaxyBrand: options.display_galaxy_brand,
+            brand: options.brand,
+            brandLink: options.logo_url,
+            brandImage: options.logo_src,
+            appRoot: getAppRoot(),
+            Galaxy: getGalaxyInstance(),
+            menuOptions: options,
+        },
+        el
+    );
+}
diff --git a/client/galaxy/scripts/layout/menu.js b/client/galaxy/scripts/layout/menu.js
index f649715bf1be..a9e97c0017d3 100644
--- a/client/galaxy/scripts/layout/menu.js
+++ b/client/galaxy/scripts/layout/menu.js
@@ -1,12 +1,7 @@
-/** Masthead Collection **/
-import $ from "jquery";
 import axios from "axios";
-import Backbone from "backbone";
 import { getGalaxyInstance } from "app";
 import _l from "utils/localization";
 import { CommunicationServerView } from "layout/communication-server-view";
-import Webhooks from "mvc/webhooks";
-import Utils from "utils/utils";
 
 export function logoutClick() {
     const galaxy = getGalaxyInstance();
@@ -34,315 +29,266 @@ export function logoutClick() {
         });
 }
 
-const Collection = Backbone.Collection.extend({
-    model: Backbone.Model.extend({
-        defaults: {
-            visible: true,
-            target: "_parent",
-        },
-    }),
-    fetch: function (options) {
-        options = options || {};
-        this.reset();
+export function fetchMenu(options = {}) {
+    const Galaxy = getGalaxyInstance();
+    const menu = [];
 
-        const Galaxy = getGalaxyInstance();
+    //
+    // Chat server tab
+    //
+    const extendedNavItem = new CommunicationServerView();
+    menu.push(extendedNavItem.render());
 
-        //
-        // Chat server tab
-        //
-        const extendedNavItem = new CommunicationServerView();
-        this.add(extendedNavItem.render());
+    //
+    // Analyze data tab.
+    //
+    menu.push({
+        id: "analysis",
+        title: _l("Analyze Data"),
+        url: "",
+        tooltip: _l("Analysis home view"),
+    });
 
-        //
-        // Analyze data tab.
-        //
-        this.add({
-            id: "analysis",
-            title: _l("Analyze Data"),
-            url: "",
-            tooltip: _l("Analysis home view"),
-        });
-
-        //
-        // Workflow tab.
-        //
-        this.add({
-            id: "workflow",
-            title: _l("Workflow"),
-            tooltip: _l("Chain tools into workflows"),
-            disabled: !Galaxy.user.id,
-            url: "workflows/list",
-            target: "__use_router__",
-        });
-
-        //
-        // Visualization tab.
-        //
-        if (Galaxy.config.visualizations_visible) {
-            this.add({
-                id: "visualization",
-                title: _l("Visualize"),
-                url: "javascript:void(0)",
-                tooltip: _l("Visualize datasets"),
-                disabled: !Galaxy.user.id,
-                menu: [
-                    {
-                        title: _l("Create Visualization"),
-                        url: "visualizations",
-                        target: "__use_router__",
-                    },
-                    {
-                        title: _l("Interactive Environments"),
-                        url: "visualization/gie_list",
-                        target: "galaxy_main",
-                    },
-                ],
-            });
-        }
+    //
+    // Workflow tab.
+    //
+    menu.push({
+        id: "workflow",
+        title: _l("Workflow"),
+        tooltip: _l("Chain tools into workflows"),
+        disabled: !Galaxy.user.id,
+        url: "workflows/list",
+        target: "__use_router__",
+    });
 
-        //
-        // 'Shared Items' or Libraries tab.
-        //
-        this.add({
-            id: "shared",
-            title: _l("Shared Data"),
+    //
+    // Visualization tab.
+    //
+    if (Galaxy.config.visualizations_visible) {
+        menu.push({
+            id: "visualization",
+            title: _l("Visualize"),
             url: "javascript:void(0)",
-            tooltip: _l("Access published resources"),
+            tooltip: _l("Visualize datasets"),
+            disabled: !Galaxy.user.id,
             menu: [
                 {
-                    title: _l("Data Libraries"),
-                    url: "library/list",
-                },
-                {
-                    title: _l("Histories"),
-                    url: "histories/list_published",
-                    target: "__use_router__",
-                },
-                {
-                    title: _l("Workflows"),
-                    url: "workflows/list_published",
+                    title: _l("Create Visualization"),
+                    url: "visualizations",
                     target: "__use_router__",
                 },
                 {
-                    title: _l("Visualizations"),
-                    url: "visualizations/list_published",
-                    target: "__use_router__",
-                },
-                {
-                    title: _l("Pages"),
-                    url: "pages/list_published",
-                    target: "__use_router__",
+                    title: _l("Interactive Environments"),
+                    url: "visualization/gie_list",
+                    target: "galaxy_main",
                 },
             ],
         });
+    }
 
-        //
-        // Webhooks
-        //
-        Webhooks.load({
-            type: "masthead",
-            callback: function (webhooks) {
-                $(document).ready(() => {
-                    webhooks.each((model) => {
-                        const webhook = model.toJSON();
-                        if (webhook.activate) {
-                            const obj = {
-                                id: webhook.id,
-                                icon: webhook.config.icon,
-                                url: webhook.config.url,
-                                tooltip: webhook.config.tooltip,
-                                /*jslint evil: true */
-                                onclick: webhook.config.function && new Function(webhook.config.function),
-                            };
-
-                            // Galaxy.page is undefined for data libraries, workflows pages
-                            const Galaxy = getGalaxyInstance();
-                            if (Galaxy.page) {
-                                Galaxy.page.masthead.collection.add(obj);
-                            } else if (Galaxy.masthead) {
-                                Galaxy.masthead.collection.add(obj);
-                            }
-
-                            // Append masthead script and styles to Galaxy main
-                            Utils.appendScriptStyle(webhook);
-                        }
-                    });
-                });
+    //
+    // 'Shared Items' or Libraries tab.
+    //
+    menu.push({
+        id: "shared",
+        title: _l("Shared Data"),
+        url: "javascript:void(0)",
+        tooltip: _l("Access published resources"),
+        menu: [
+            {
+                title: _l("Data Libraries"),
+                url: "library/list",
+            },
+            {
+                title: _l("Histories"),
+                url: "histories/list_published",
+                target: "__use_router__",
+            },
+            {
+                title: _l("Workflows"),
+                url: "workflows/list_published",
+                target: "__use_router__",
+            },
+            {
+                title: _l("Visualizations"),
+                url: "visualizations/list_published",
+                target: "__use_router__",
             },
+            {
+                title: _l("Pages"),
+                url: "pages/list_published",
+                target: "__use_router__",
+            },
+        ],
+    });
+
+    //
+    // Admin.
+    //
+    if (Galaxy.user.get("is_admin")) {
+        menu.push({
+            id: "admin",
+            title: _l("Admin"),
+            url: "admin",
+            tooltip: _l("Administer this Galaxy"),
+            cls: "admin-only",
         });
+    }
 
-        //
-        // Admin.
-        //
-        if (Galaxy.user.get("is_admin")) {
-            this.add({
-                id: "admin",
-                title: _l("Admin"),
-                url: "admin",
-                tooltip: _l("Administer this Galaxy"),
-                cls: "admin-only",
-            });
+    //
+    // User tab.
+    //
+    let userTab = {};
+    if (!Galaxy.user.id) {
+        if (options.allow_user_creation) {
+            userTab = {
+                id: "user",
+                title: _l("Login or Register"),
+                cls: "loggedout-only",
+                url: "login",
+                tooltip: _l("Log in or register a new account"),
+            };
+        } else {
+            userTab = {
+                id: "user",
+                title: _l("Login"),
+                cls: "loggedout-only",
+                tooltip: _l("Login"),
+                url: "login",
+                noscratchbook: true,
+            };
         }
-
-        //
-        // Help tab.
-        //
-        const helpTab = {
-            id: "help",
-            title: _l("Help"),
+    } else {
+        userTab = {
+            id: "user",
+            title: _l("User"),
+            cls: "loggedin-only",
             url: "javascript:void(0)",
-            tooltip: _l("Support, contact, and community"),
+            tooltip: _l("Account and saved data"),
             menu: [
                 {
-                    title: _l("Support"),
-                    url: options.support_url,
-                    target: "_blank",
+                    title: `${_l("Logged in as")} ${Galaxy.user.get("email")}`,
+                    class: "dropdown-item disabled",
+                },
+                {
+                    title: _l("Preferences"),
+                    url: "user",
+                    target: "__use_router__",
+                },
+                {
+                    title: _l("Custom Builds"),
+                    url: "custom_builds",
+                    target: "__use_router__",
                 },
                 {
-                    title: _l("Search"),
-                    url: options.search_url,
-                    target: "_blank",
+                    title: _l("Logout"),
+                    divider: true,
+                    onclick: logoutClick,
                 },
                 {
-                    title: _l("Mailing Lists"),
-                    url: options.mailing_lists,
-                    target: "_blank",
+                    title: _l("Datasets"),
+                    url: "datasets/list",
+                    target: "__use_router__",
                 },
                 {
-                    title: _l("Videos"),
-                    url: options.screencasts_url,
-                    target: "_blank",
+                    title: _l("Histories"),
+                    url: "histories/list",
+                    target: "__use_router__",
                 },
                 {
-                    title: _l("Wiki"),
-                    url: options.wiki_url,
-                    target: "_blank",
+                    title: _l("Histories shared with me"),
+                    url: "histories/list_shared",
+                    target: "__use_router__",
                 },
                 {
-                    title: _l("How to Cite Galaxy"),
-                    url: options.citation_url,
-                    target: "_blank",
+                    title: _l("Pages"),
+                    url: "pages/list",
+                    target: "__use_router__",
                 },
                 {
-                    title: _l("Interactive Tours"),
-                    url: "tours",
+                    title: _l("Workflow Invocations"),
+                    url: "workflows/invocations",
+                    target: "__use_router__",
                 },
             ],
         };
-        if (options.terms_url) {
-            helpTab.menu.push({
-                title: _l("Terms and Conditions"),
-                url: options.terms_url,
-                target: "_blank",
+        if (Galaxy.config.visualizations_visible) {
+            userTab.menu.push({
+                title: _l("Visualizations"),
+                url: "visualizations/list",
+                target: "__use_router__",
             });
         }
-        if (options.helpsite_url) {
-            helpTab.menu.unshift({
-                title: _l("Galaxy Help"),
-                url: options.helpsite_url,
-                target: "_blank",
+        if (Galaxy.config.interactivetools_enable) {
+            userTab.menu[userTab.menu.length - 1].divider = true;
+            userTab.menu.push({
+                title: _l("Active InteractiveTools"),
+                url: "interactivetool_entry_points/list",
+                target: "__use_router__",
             });
         }
-        this.add(helpTab);
-
-        //
-        // User tab.
-        //
-        let userTab = {};
-        if (!Galaxy.user.id) {
-            if (options.allow_user_creation) {
-                userTab = {
-                    id: "user",
-                    title: _l("Login or Register"),
-                    cls: "loggedout-only",
-                    url: "login",
-                    tooltip: _l("Log in or register a new account"),
-                };
-            } else {
-                userTab = {
-                    id: "user",
-                    title: _l("Login"),
-                    cls: "loggedout-only",
-                    tooltip: _l("Login"),
-                    url: "login",
-                    noscratchbook: true,
-                };
-            }
-        } else {
-            userTab = {
-                id: "user",
-                title: _l("User"),
-                cls: "loggedin-only",
-                url: "javascript:void(0)",
-                tooltip: _l("Account and saved data"),
-                menu: [
-                    {
-                        title: `${_l("Logged in as")} ${Galaxy.user.get("email")}`,
-                        class: "dropdown-item disabled",
-                    },
-                    {
-                        title: _l("Preferences"),
-                        url: "user",
-                        target: "__use_router__",
-                    },
-                    {
-                        title: _l("Custom Builds"),
-                        url: "custom_builds",
-                        target: "__use_router__",
-                    },
-                    {
-                        title: _l("Logout"),
-                        divider: true,
-                        onclick: logoutClick,
-                    },
-                    {
-                        title: _l("Datasets"),
-                        url: "datasets/list",
-                        target: "__use_router__",
-                    },
-                    {
-                        title: _l("Histories"),
-                        url: "histories/list",
-                        target: "__use_router__",
-                    },
-                    {
-                        title: _l("Histories shared with me"),
-                        url: "histories/list_shared",
-                        target: "__use_router__",
-                    },
-                    {
-                        title: _l("Pages"),
-                        url: "pages/list",
-                        target: "__use_router__",
-                    },
-                    {
-                        title: _l("Workflow Invocations"),
-                        url: "workflows/invocations",
-                        target: "__use_router__",
-                    },
-                ],
-            };
-            if (Galaxy.config.visualizations_visible) {
-                userTab.menu.push({
-                    title: _l("Visualizations"),
-                    url: "visualizations/list",
-                    target: "__use_router__",
-                });
-            }
-            if (Galaxy.config.interactivetools_enable) {
-                userTab.menu[userTab.menu.length - 1].divider = true;
-                userTab.menu.push({
-                    title: _l("Active InteractiveTools"),
-                    url: "interactivetool_entry_points/list",
-                    target: "__use_router__",
-                });
-            }
-        }
-        this.add(userTab);
-        return new $.Deferred().resolve().promise();
-    },
-});
+    }
+    menu.push(userTab);
 
-export default {
-    Collection: Collection,
-};
+    //
+    // Help tab.
+    //
+    const helpTab = {
+        id: "help",
+        title: _l("Help"),
+        url: "javascript:void(0)",
+        tooltip: _l("Support, contact, and community"),
+        menu: [
+            {
+                title: _l("Support"),
+                url: options.support_url,
+                target: "_blank",
+            },
+            {
+                title: _l("Search"),
+                url: options.search_url,
+                target: "_blank",
+            },
+            {
+                title: _l("Mailing Lists"),
+                url: options.mailing_lists,
+                target: "_blank",
+            },
+            {
+                title: _l("Videos"),
+                url: options.screencasts_url,
+                target: "_blank",
+            },
+            {
+                title: _l("Wiki"),
+                url: options.wiki_url,
+                target: "_blank",
+            },
+            {
+                title: _l("How to Cite Galaxy"),
+                url: options.citation_url,
+                target: "_blank",
+            },
+            {
+                title: _l("Interactive Tours"),
+                url: "tours",
+            },
+        ],
+    };
+    if (options.terms_url) {
+        helpTab.menu.push({
+            title: _l("Terms and Conditions"),
+            url: options.terms_url,
+            target: "_blank",
+        });
+    }
+    if (options.helpsite_url) {
+        helpTab.menu.unshift({
+            title: _l("Galaxy Help"),
+            url: options.helpsite_url,
+            target: "_blank",
+        });
+    }
+    menu.push(helpTab);
+    return menu;
+}
diff --git a/client/galaxy/scripts/layout/page.js b/client/galaxy/scripts/layout/page.js
index 3078d83c08d5..d65669747c6c 100644
--- a/client/galaxy/scripts/layout/page.js
+++ b/client/galaxy/scripts/layout/page.js
@@ -3,7 +3,7 @@ import $ from "jquery";
 import Backbone from "backbone";
 import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
-import Masthead from "layout/masthead";
+import { MastheadState, mountMasthead } from "layout/masthead";
 import Panel from "layout/panel";
 import Modal from "mvc/ui/ui-modal";
 import Utils from "utils/utils";
@@ -14,7 +14,6 @@ const View = Backbone.View.extend({
     _panelids: ["left", "right"],
 
     initialize: function (options) {
-        const self = this;
         this.config = _.defaults(options.config || {}, {
             message_box_visible: false,
             message_box_content: "",
@@ -28,8 +27,8 @@ const View = Backbone.View.extend({
         // attach global objects, build mastheads
         const Galaxy = getGalaxyInstance();
         Galaxy.modal = this.modal = new Modal.View();
-        Galaxy.router = this.router = options.Router && new options.Router(self, options);
-        this.masthead = new Masthead.View(this.config);
+        Galaxy.router = this.router = options.Router && new options.Router(this, options);
+        const mastheadState = new MastheadState();
         this.center = new Panel.CenterPanel();
 
         // display helper
@@ -42,9 +41,9 @@ const View = Backbone.View.extend({
                 view.allow_title_display = true;
             }
             if (view.active_tab) {
-                self.masthead.highlight(view.active_tab);
+                this.masthead.highlight(view.active_tab);
             }
-            self.center.display(view);
+            this.center.display(view);
         };
 
         // build page template
@@ -60,10 +59,10 @@ const View = Backbone.View.extend({
             this.$masthead.remove();
             this.$center.css("top", 0);
         } else {
-            this.$masthead.replaceWith(this.masthead.$el);
+            this.masthead = mountMasthead(this.$masthead[0], this.config, mastheadState);
         }
         this.$center.append(this.center.$el);
-        this.$el.append(this.masthead.frame.$el);
+        this.$el.append(mastheadState.frame.$el);
         this.$el.append(this.modal.$el);
 
         // build panels
@@ -73,10 +72,10 @@ const View = Backbone.View.extend({
                 const panel_class_name = panel_id.charAt(0).toUpperCase() + panel_id.slice(1);
                 const panel_class = options[panel_class_name];
                 if (panel_class) {
-                    const panel_instance = new panel_class(self, options);
-                    const panel_el = self.$(`#${panel_id}`);
-                    self[panel_instance.toString()] = panel_instance;
-                    self.panels[panel_id] = new Panel.SidePanel({
+                    const panel_instance = new panel_class(this, options);
+                    const panel_el = this.$(`#${panel_id}`);
+                    this[panel_instance.toString()] = panel_instance;
+                    this.panels[panel_id] = new Panel.SidePanel({
                         id: panel_id,
                         el: panel_el,
                         view: panel_instance,
@@ -102,7 +101,7 @@ const View = Backbone.View.extend({
         // TODO: Remove this line after select2 update
         $(".select2-hidden-accessible").remove();
         if (!this.config.hide_masthead) {
-            this.masthead.render();
+            // this.masthead.render();
             this.renderMessageBox();
             this.renderInactivityBox();
         }
@@ -143,14 +142,13 @@ const View = Backbone.View.extend({
 
     /** Render panels */
     renderPanels: function () {
-        const self = this;
         _.each(this._panelids, (panel_id) => {
-            const panel = self.panels[panel_id];
+            const panel = this.panels[panel_id];
             if (panel) {
                 panel.render();
             } else {
-                self.$center.css(panel_id, 0);
-                self.$(`#${panel_id}`).hide();
+                this.$center.css(panel_id, 0);
+                this.$(`#${panel_id}`).hide();
             }
         });
         return this;
diff --git a/client/galaxy/scripts/layout/scratchbook.js b/client/galaxy/scripts/layout/scratchbook.js
index 1d2a9288d907..a4f7debbf873 100644
--- a/client/galaxy/scripts/layout/scratchbook.js
+++ b/client/galaxy/scripts/layout/scratchbook.js
@@ -16,33 +16,28 @@ export default Backbone.View.extend({
         this.frames = new Frames.View({ visible: false });
         this.setElement(this.frames.$el);
         this.active = false;
-        this.buttonActive = options.collection.add({
+        this.buttonActive = {
             id: "enable-scratchbook",
             icon: "fa-th",
             tooltip: _l("Enable/Disable Scratchbook"),
+            toggle: false,
             onclick: () => {
                 this.active = !this.active;
-                this.buttonActive.set({
-                    toggle: this.active,
-                    show_note: this.active,
-                    note_cls: this.active && "fa fa-check",
-                });
+                this.buttonActive.toggle = this.active;
+                this.buttonActive.show_note = this.active;
+                this.buttonActive.note_cls = this.active && "fa fa-check";
                 if (!this.active) {
                     this.frames.hide();
                 }
             },
-            onbeforeunload: () => {
-                if (this.frames.length() > 0) {
-                    return `You opened ${this.frames.length()} frame(s) which will be lost.`;
-                }
-            },
-        });
-        this.buttonLoad = options.collection.add({
+        };
+        this.buttonLoad = {
             id: "show-scratchbook",
             icon: "fa-eye",
             tooltip: _l("Show/Hide Scratchbook"),
             show_note: true,
             visible: false,
+            note: "",
             onclick: (e) => {
                 if (this.frames.visible) {
                     this.frames.hide();
@@ -50,23 +45,7 @@ export default Backbone.View.extend({
                     this.frames.show();
                 }
             },
-        });
-        this.frames
-            .on("add remove", () => {
-                if (this.frames.visible && this.frames.length() === 0) {
-                    this.frames.hide();
-                }
-                this.buttonLoad.set({
-                    note: this.frames.length(),
-                    visible: this.frames.length() > 0,
-                });
-            })
-            .on("show hide ", () => {
-                this.buttonLoad.set({
-                    toggle: this.frames.visible,
-                    icon: (this.frames.visible && "fa-eye") || "fa-eye-slash",
-                });
-            });
+        };
         this.history_cache = {};
     },
 
@@ -75,6 +54,14 @@ export default Backbone.View.extend({
         return this.frames;
     },
 
+    beforeUnload() {
+        let confirmText = "";
+        if (this.frames.length() > 0) {
+            confirmText = `You opened ${this.frames.length()} frame(s) which will be lost.`;
+        }
+        return confirmText;
+    },
+
     /** Add a dataset to the frames */
     addDataset: function (dataset_id) {
         const self = this;