Is this possible in a menu?

Wondering if it is possible to add an item LIKE a language switcher (the drop down that has the flags that switches you between languages) as an item in the menu.

Are you using a language switcher plugin?

If so, I recommend asking at the support of that plugin so its developers and support community can help you with this.

I get the language switcher idea and concept. What I am asking is if, instead of switching languages, if you can use a toggle similar to a language switcher and instead of switching languages, you would swap one menu for another.

@nketola

Possible? Yes.

Here’s a crude working example. This of course is all dependent on your theme’s nav markup.

In your menu in the admin ()
Add a custom link and paste this in:
<select><option value="parents">Parents</option><option value="kids">Kids</option></select>
and give it the class of navSelect and a link value of #

To set a class on a menu item, in screen options on the menu page in the admin, make sure “CSS Classes” is checked.

Then all the links you want to be parents, give them the class of parents and then the links for kids, give them the class of kids

then you can add the JS below to make the toggle.

$ = jQuery;
$('document').ready(function(){
	/* select the correct nav to show on load */
	if($('.current-menu-item').hasClass('parents')){
		$('#site-navigation select option[value="parents"]').prop('selected', true);
	} 
	else if($('.current-menu-item').hasClass('kids')){
		$('#site-navigation select option[value="kids"]').prop('selected', true);
	}
	else {
		/* assuming you want the parents nav to be default */
		$('#site-navigation select option[value="parents"]').prop('selected', true);
	}
	/* hide the nav you don't want on load */
	var currentNav = $('#site-navigation select').val();
	$('#site-navigation li:not(.' + currentNav + ')').hide();
	/* make sure the select is always shown */
	$('#site-navigation li.navSelect').show();
	$('#site-navigation').find('select').unwrap().on('change', function(){
		/* on change, show and hide accordingly */
		var currentNav = $('#site-navigation select').val();
		$('#site-navigation li.' + currentNav).show();
		$('#site-navigation li:not(.' + currentNav + ')').hide();
		$('#site-navigation li.navSelect').show();	
	});
});

So with that in place, on page load, it checks to see if you are on a page, thus the class of current-menu-item on your nav li. If that class exists, it finds whether your link is parents or kids and then selects the appropriate option and shows and hides the links accordingly. If that class doesn’t exist, it defaults to parents.

Then when the user changes the drop down, it gets the value of the selected option (parents or kids) and shows and hides the appropriate menu items.

So it’s totally possible, your implementation may vary and this could be cleaned up depending on how your site is built.