Using menus with Interchange

Hi, newbie here.

I’m using the Sass version of Foundation 6.6.3 for a new website and have run into problems with interchange. Can anyone confirm please whether it’s possible to use Interchange to serve up different menus in F6? (I wanted to use a fancy megamenu for desktop that doesn’t translate well to a drilldown on mobile, so figured I’d split them up.)

I used this technique successfully in F5 as follows:

<div id="menu-wrap" data-interchange="
	[../inc/nav-mobile.php, (small)], 
	[../inc/nav-desktop.php, (medium)], 
	[../inc/nav-desktop.php, (large)]">
	<div>
		<?php include "../inc/nav-desktop.php"; ?>
	</div>
</div>

Now in F6, I’m using the slightly tweaked format:

<div id="menu-wrap" data-interchange="
    [../inc/nav-mobile.php, small], 
    [../inc/nav-desktop.php, medium], 
    [../inc/nav-desktop.php, large]">
</div>

Unfortunately that just displays all the menu items and sublinks in a long list. There’s no dropping-down or drilling-down happening.

The include paths are working because when I add ‘This is desktop’/‘This is mobile’ as static content, it serves the correct one at the correct breakpoint. It’s just the dropdown and drilldown menu functionality that doesn’t seem to survive the Interchange journey.

Any help greatly appreciated!

Interchange is mainly for images / media (more flexible picture / srcset alternative), you can either use our responsive navigation component (https://get.foundation/sites/docs/responsive-navigation.html) or the visibility helper classes (hide- / show-, https://get.foundation/sites/docs/visibility.html). Or just the plain JS APIs.

If you want to use interchange you have to initialize the content on each breakpoint (change):

https://get.foundation/sites/docs/interchange.html
https://get.foundation/sites/docs/media-queries.html#javascript

1 Like

Thanks for confirming Daniel. It must have been a fortunate accident that it worked in F5. I’ll see if I can stick to the regular visibility classes for this one.