JSFiddle - React, Tailwind, and code Playground

by Andrey K

HTML

<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.css">
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<div class="ui fixed menu">
<div id="my-dropdown" class="ui pointing dropdown link item">
    <span class="text">Shopping</span>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="header">Categories</div>
        <div class="item">
            <i class="dropdown icon"></i>
            <span class="text">Clothing</span>
            <div class="menu">
            <div class="header">Mens</div>
            <div class="item">Shirts</div>
            <div class="item">Pants</div>
            <div class="item">Jeans</div>
            <div class="item">Shoes</div>
            <div class="divider"></div>
            <div class="header">Womens</div>
            <div class="item">Dresses</div>
            <div class="item">Shoes</div>
            <div class="item">Bags</div>
            </div>
        </div>
        <div class="item">Home Goods</div>
        <div class="item">Bedroom</div>
        <div class="divider"></div>
        <div class="header">Order</div>
        <div class="item">Status</div>
        <div class="item">Cancellations</div>
    </div>
</div>
</div>

<div>&nbsp;</div>

<div id="result" class="ui segment">Your result is displayed here. Please select your choice</div>

CSS

body {
    padding: 1em;
}

JavaScript

$("#my-dropdown").dropdown({
	onChange: function(value, text, $choice) {
        $("#result").html("<b>" + text + "</b> selected");
    }
});