How can I close the Foundation topbar menu when a link is clicked?

You can try adding some jQuery to collapse the menu when you click on a link.

You can add the code wrapped inside a script element. Place it after all your html elements (inside body element). You can also put it in a separate javascript file that you can source like you would any other javascript file. Make sure you put that link after jquery link.

The code itself can be pretty simple since it looks like foundation adds a class called "expanded" to the nav bar when you toggle the menu icon on and off. So you can just remove the "expanded" class when someone clicks on your buttons.

This is what it should look like:

jQuery(document).ready(function($) {
    $('.top-bar ul.right(or .left depending how you arranged your buttons) li').click(function() {
       $('.top-bar').removeClass('expanded');
    });
}(jQuery));

The selector '.top-bar ul.right(or .left depending how you arranged your buttons) li' can be called with an id also if you give your menu (the ul element) a unique id. In this case it would be:

jQuery(document).ready(function($) {
    $('#myMenuId li').click(function() { 
        $('.top-bar').removeClass('expanded'); 
    });
}(jQuery));

Hope that helps.

Try:

$('#main-menu li').click(function() {
    $('.toggle-topbar').trigger('click');
});

I'm working with Foundation 6 for the first time, and I ran across this post while trying to figure out a way to close the new top-bar menu on mobile when a link had been clicked. I wanted to comment with my solution in case anyone else working on Foundation 6 runs across this post, since it was a good starting place for me.

Here's what I did:

Navigation setup - horizontal nav on medium and large breakpoints, responsive toggle vertical nav on small breakpoint

                <!--  Mobile responsive toggle (hamburger menu) -->
                <div class="title-bar" data-responsive-toggle="siteNav" data-hide-for="medium">
                    <button class="menu-icon" type="button" data-toggle></button>
                    <div class="title-bar-title">Menu</div>
                </div>

                <!-- Nav items -->
                <div id="siteNav" class="top-bar"> 
                    <p><ul class="vertical medium-horizontal menu text-center">
                        <li ><a href="#home" onClick="">HOME</a></li>
                        <li ><a href="#services">SERVICES</a></li>
                        <li ><a href="#contact">CONTACT</a></li>
                    </ul></p>
                </div>

Then I added a modified version of the jquery based on the previous solutions in this post (thanks to amazingBastard and Cerbrus):

$(document).ready(function($) {
        $('#siteNav li').click(function() { 
            if(Foundation.MediaQuery.current == 'small'){
                $('#siteNav').css('display', 'none'); 
            }
        });
    });

In Foundation 6 the css selector "display" is added to an expanded menu and set to either "display:none" for hidden or "display:block" for expanded. This jquery snippet checks the current breakpoint against small(mobile device) on click of a nav item in the default menu class I am using, and if true changes the css selector to "display:none", effectively closing the menu toggle.