JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="http://www.filamentgroup.com/examples/menus/fg.menu.js"></script>
<link rel="stylesheet" href="http://www.filamentgroup.com/examples/menus/fg.menu.css">
<link rel="stylesheet" href="http://www.filamentgroup.com/examples/menus/theme/ui.all.css">
<div class="demo">  
    <div id="dialog" title="Basic dialog">     
        <p>This is an animated dialog which is useful for displaying information. </p> 
        <a tabindex="0" style="font-size:10px;float:right;" href="#news-items-2" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="hierarchybreadcrumb"><span class="ui-icon ui-icon-triangle-1-s"></span>ipod menu</a>
<div id="news-items-2" class="hidden">
    <ul name="helper_e_editorvar">
        <li><a href="#">Breaking News</a>
            <ul>
                <li><a href="#">Entertainment</a></li>
                <li><a href="#">Sports</a>
                </li>
                <li><a href="#">Local</a></li>
            </ul>
        </li>
        <li><a href="#">Entertainment</a></li>
        <li><a href="#">Finance</a></li>
    </ul>
</div>
<!--IPODMENU END-->
    </div>  
    <button id="opener">Open Dialog</button>  
</div>

CSS

<style type="text/css">
    #menuLog { font-size:1.4em; margin:20px; }
    .fg-menu-container{ z-index:2001 !important;position:relative;}
    .hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }
    .fg-button { clear:left; margin:0 4px 40px 20px; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
    .fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
    a.fg-button { float:left;  }
    button.fg-button { width:auto; overflow:visible; } /* removes extra button width in IE */
    .fg-button-icon-left { padding-left: 2.1em; }
    .fg-button-icon-right { padding-right: 2.1em; }
    .fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
    .fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
    .fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }     /* solo icon buttons must have block properties for the text-indent to work */    
    .fg-button.ui-state-loading .ui-icon { background: url(spinner_bar.gif) no-repeat 0 0; }

        .notoolbar .ui-dialog-titlebar {display:none}
        .ui-widget-content {
            font-size:9px;
                color:red;
        }

    </style>

JavaScript

$(function() {
    $( "#dialog" ).dialog({autoOpen: false,show: "blind",hide: "explode"});
    $( "#opener" ).click(function() {$( "#dialog" ).dialog( "open" );
    return false;});
});

    $(function(){
        // BUTTONS
        $('.fg-button').hover(
            function(){ $(this).removeClass('ui-state-default').addClass('ui-state-focus'); },
            function(){ $(this).removeClass('ui-state-focus').addClass('ui-state-default'); }
        );
        
        // MENUS        
        $('#hierarchybreadcrumb').menu({
            content: $('#hierarchybreadcrumb').next().html(),
            backLink: false
        });
        
    });