JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="row">
    <div class="level level-1">Header <i class="fa fa-chevron-right"></i>

    </div>
    <div class="level level-2"> <i class="fa fa-chevron-left"></i>
Sub-Header <i class="fa fa-chevron-right"></i>

    </div>
    <div class="level level-3"> <i class="fa fa-chevron-left"></i>

        <ul>
            <li>Content</li>
            <li>Content</li>
            <li>Content</li>
            <li>Content</li>
            <li>Content</li>
        </ul>
    </div>
</div>

CSS

.row {
    white-space : nowrap;
    width: 200px;
    overflow: hidden;
}
.level {
    display: inline-block;
    height: 900px;
    width: 200px;
    vertical-align: top;
}
.level-2 {
}
.level-3 {
}
ul {
    padding-left: 10px;
    margin-top: 0px;
}
i {
    cursor: pointer;
}

JavaScript

$('i.fa-chevron-right').on('click', function () {
    $(this).closest('div').animate({
        marginLeft: '-200px'
    });
});

$('.level-2 > i.fa-chevron-left').on('click', function() {
    $('.level-1, .level-2').animate({
        marginLeft: 0
    });
});

$('.level-3 > i.fa-chevron-left').on('click', function() {
    $('.level-2').animate({
        marginLeft: 0
    });
});