JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="nav">
    <ul>
        <li><a href="#">link 1</a>
            <ul>
                <li><a href="#sub">Sublink 1</a></li>
                <li><a href="#sub2">Sublink 2</a>
                    <ul>
                        <li><a href="#subsub3">Subsublink 1</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#test">link 2</a></li>
    </ul>
</nav>
<section>
    Body
</section>

CSS

#nav ul ul {
    display: none;
}

JavaScript

$(document).ready(function() {
    
    //mark item that corresponds with location path as active
    $('#nav a[href*="' + window.location.pathname + '"]').addClass('active');
    
    $('#nav a').on('click', function() {
        //toggle only
        $(this).parent().find('> ul').show();
    });
    
    var $activeLinks = $('#nav a.active');
    
    //show all parents to be able to navigate back
    $activeLinks.parents('ul').show();
    
    //show direct children of currently active item
    $activeLinks.parent().find('> ul').show();
    
});