If you are trying to clone the “Header Menu” widget to make modifications, you’ll notice it isn’t so easy. This article takes through the obstacles of cloning that widget. If this worked for you, let’s hear it in the comments!

Clone Header Widget

Login as admin
Left Navigator Bar > Service Portal Menus > Pick your Menu
Open Widget: Header Menu.
Click the Clone Widget button
Rename to Header Menu v2
On this line of HTML change the ng-include="'menuTemplate'" to ng-include="'menuTemplateCustom'"

<li ng-repeat="item in visibleItems" ng-class="{dropdown: item.items.length > 0, 'header-menu-item': true}" ng-include="'menuTemplateCustom'" role="presentation"></li>

7. Click Update

Copy Angular Templates

The angular templates don’t copy when you clone a Header Menu widget. You can find angular templates at the bottom of the form.

Left Navigator Bar > Service Portal > Widgets
Search and find the old Header Widget: Header Menu
Open each Angular Template at the bottom of the form
Rename the ID and Widget and click INSERT AND STAY

ID: menuTemplateCustom | Widget: Header Menu v2
ID: item-added-tooltipCustom.html | Widget: Header Menu v2
ID: spDropdownTreeTemplateCustom | Widget: Header Menu v2

Directive

You need to add a directive as a there is a new template

Left Navigator Bar > Service Portal > Angular Providers
Click New
Add Code:

Directive: spDropdownTreeTemplateCustom
Script: 
function () {
	return {
		restrict: 'E',
		scope: {items: '='},
		replace: true,
		template: '<ul class="dropdown-menu">' +
		'<li ng-repeat="mi in items" style="min-width: 20em;" ng-class="{\'dropdown-submenu\': mi.type == \'menu\', \'dropdown-menu-line\':$index < items.length - 1}" ng-include="getURL()">' +
		'</ul>',
		link : function(scope, element, attrs, controller) {
			scope.getURL = function() {
				return 'spDropdownTreeTemplateCustom';
			}
		}
	}
};
(function($) {
	$("body").on( "click", "a.menu_trigger", function(e) {
		var current = $(this).next();
		var grandparent = $(this).parent().parent();
		if ($(this).hasClass('left-caret') || $(this).hasClass('right-caret'))
			$(this).toggleClass('right-caret left-caret');
		grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
		current.toggle();
		$(".dropdown-menu").each(function(i, elem) {
			var elemClosest = $(elem).closest('.dropdown');
			var currentClosest = current.closest('.dropdown');
			if (!elem.contains(current[0]) && elem != current[0] && (!currentClosest.length || !elemClosest.length || elemClosest[0] == currentClosest[0]))
				$(elem).hide();
		})
		e.stopPropagation();
	});
	$("body").on( "click", "a:not(.menu_trigger)", function() {
		var root=$(this).closest('.dropdown');
		root.find('.left-caret').toggleClass('right-caret left-caret');
	});
})(jQuery);

4. Click Update