JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/vendor/modernizr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.css">
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
<nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name">
             <h1><a href="https://www.google.com/">My Site</a></h1>

        </li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="https://www.google.com/"><span>Menu</span></a>

        </li>
    </ul>
    <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="right">
            <li class="active"><a href="https://www.google.com/">Right Button Active</a>

            </li>
            <li class="has-dropdown"> <a href="https://www.google.com/">Right Button Dropdown</a>

                <ul class="dropdown">
                    <li><a href="https://www.google.com/">First link in dropdown</a>

                    </li>
                    <li class="active"><a href="https://www.google.com/">Active link in dropdown</a>

                    </li>
                </ul>
            </li>
        </ul>
        <!-- Left Nav Section -->
        <ul class="left">
            <li><a href="https://www.google.com/">Left Nav Button</a>

            </li>
        </ul>
    </section>
</nav>
<p><button class="small">Stop Propagation</button></p>

CSS

p {
    margin-top: 1em;
}

JavaScript

$(document).ready(function () {
    $(this).foundation();
    $("#stop").on("click", function () {
        $(".has-dropdown").click(function (event) {
            event.stopPropagation();
        });
    });
});