JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container" style="margin-top:  20px">
    <div class="row">
        <div class="col-md-2" style="width: 300px /* width there only for pretty demo */">
            <ul class="nav nav-pills nav-stacked custom-nav-stacked">
                <li class="active"><a href="#">A long long text</a><div class="triangle"></div></li>
                <li><a href="#">Small text</a></li>
                <li class="active"><a href="#">A long long long long long long long long long text</a><div class="triangle"></div></li>
                <li><a href="#">Small text 111</a></li>
            </ul>            
        </div>
    </div>
</div>

CSS

.custom-nav-stacked > li > a {
    border-radius: 2px;
}
.custom-nav-stacked > li.active .triangle {
    position: absolute;
    left: 100%;
    top: 50%;
    border-color:transparent;
    border-left-color:#428bca;
    border-style:solid;    
}

JavaScript

var actives = document.getElementsByClassName("active"),
    triangles = document.getElementsByClassName("triangle");

for(var i = 0, l = actives.length; i < l; i++) {
    triangles[i].style.borderTopWidth = actives[i].clientHeight / 2 + "px";
    triangles[i].style.borderBottomWidth = actives[i].clientHeight / 2 + "px";
    triangles[i].style.borderLeftWidth = actives[i].clientHeight / 3 + "px";
    triangles[i].style.marginTop = - actives[i].clientHeight / 2 + "px";
}