JSFiddle - React, Tailwind, and code Playground

by amkrtchyan

HTML

<div class="navigator">
    <ul>
        <li class="nav-item nav-parent nav-expanded">Category One
            <ul>
                <li class="nav-item nav-parent nav-collapsed">Subcategory One</li>
                <li class="nav-item nav-parent nav-collapsed">Subcategory Two</li>
                <li class="nav-item nav-parent nav-collapsed">Subcategory Three</li>
                <li class="nav-item nav-parent nav-expanded">Subcategory Four
                    <ul>
                        <li class="nav-item nav-expanded">Item 4-1</li>
                        <li class="nav-item nav-selected">Item 4-2</li>
                        <li class="nav-item nav-expanded">Item 4-3</li>
                    </ul>
                </li>
                <li class="nav-item nav-parent nav-collapsed">Subcategory Five</li>
            </ul>
        </li>
        <li class="nav-item nav-collapsed">Category Two</li>
        <li class="nav-item nav-collapsed">Category Three</li>
        <li class="nav-item nav-collapsed">Category Four</li>
    </ul>
</div>

CSS

li.nav-expanded:before {
    content: "- ";
}
li.nav-collapsed:before {
    content: "+ ";
}