| Vapor CSS

<nav class="navigation ml1">
    <div class="navigation-menu" style="max-height: 300px">
        <ul class="navigation-menu-sections">
            <li class="block navigation-menu-section">
                <header class="navigation-menu-section-header">
                    <svg class="navigation-menu-section-header-icon icon fill-white mod-lg" viewBox="0 0 512 512">
                        <path d="M0 80v80h512V80H0zM64 0L0 64h512L448 0H64zm128 288v32h128v-32H192zM32 192v320h448V192H32zm128 64h192v96H160v-96z"></path>
                    </svg>
                    Section 1
                    <span class="collapsible-arrow icon fill-white open">
                         <svg viewbox="0 0 12.6 7.2"><path d="M.945.046c.3 0 .5.1.7.3l4.6 4.6 4.6-4.6c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-5.2 5.2c-.4.4-1.2.4-1.6 0l-5.2-5.2c-.4-.4-.4-1 0-1.4.2-.2.4-.3.7-.3"/></svg>
                    </span>
                </header>
                <ul class="navigation-menu-section-items">
                    <li class="navigation-menu-section-item state-active">
                        <a href="#" class="block navigation-menu-section-item-link">
                            Super Item 1
                        </a>
                    </li>
                    <li class="navigation-menu-section-item">
                        <a href="#" class="block navigation-menu-section-item-link">
                            Item 2
                        </a>
                    </li>
                </ul>
            </li>
            <li class="block navigation-menu-section">
                <header class="navigation-menu-section-header">
                    <svg class="navigation-menu-section-header-icon icon fill-white mod-lg" viewBox="0 0 512 512">
                        <path d="M0 80v80h512V80H0zM64 0L0 64h512L448 0H64zm128 288v32h128v-32H192zM32 192v320h448V192H32zm128 64h192v96H160v-96z"></path>
                    </svg>
                    Section 2
                    <span class="collapsible-arrow icon fill-white">
                        <svg viewbox="0 0 12.6 7.2"><path d="M.945.046c.3 0 .5.1.7.3l4.6 4.6 4.6-4.6c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-5.2 5.2c-.4.4-1.2.4-1.6 0l-5.2-5.2c-.4-.4-.4-1 0-1.4.2-.2.4-.3.7-.3"/></svg>
                    </span>
                </header>
                <ul class="navigation-menu-section-items hide">
                    <li class="navigation-menu-section-item">
                        <a href="#" class="block navigation-menu-section-item-link">
                            Item 1
                        </a>
                    </li>
                    <li class="navigation-menu-section-item">
                        <a href="#" class="block navigation-menu-section-item-link state-locked" title="This menu item is locked.">
                            Item 2
                            <span class="navigation-menu-section-item-link-icon">
                                <svg viewBox="0 0 12 14" class="icon mod-lg fill-white">
                                    <path d="M9.992 5H2.009c-1.107 0-2.01.894-2.01 1.997v5.01c0 1.101.899 1.997 2.01 1.997h7.983c1.107 0 2.01-.894 2.01-1.997v-5.01c0-1.101-.9-1.997-2.01-1.997m-.001 1.5c.28 0 .509.223.509.497v5.01a.504.504 0 0 1-.509.497H2.008a.503.503 0 0 1-.508-.497v-5.01c0-.274.228-.497.508-.497h7.983M10 5H8.4V3.938c0-1.3-1.076-2.359-2.4-2.359-1.324 0-2.4 1.059-2.4 2.359V5H2V3.938C2 1.767 3.794 0 6 0s4 1.767 4 3.938V5"></path>
                                </svg>
                            </span>
                        </a>
                    </li>
                    <li class="navigation-menu-section-item">
                        <a href="#" class="block navigation-menu-section-item-link">
                            Item 3
                        </a>
                    </li>
                    <li class="navigation-menu-section-item">
                        <a href="#" class="block navigation-menu-section-item-link">
                            Item with tag<span class="navigation-tag">new</span>
                        </a>
                    </li>
                    <li class="navigation-menu-section-item">
                        <a href="#" class="block navigation-menu-section-item-link state-locked" title="This menu item is locked.">
                            Item with tag and lock
                            <span class="navigation-tag">new</span>
                            <span class="navigation-menu-section-item-link-icon">
                                <svg viewBox="0 0 12 14" class="icon mod-lg fill-white">
                                    <path d="M9.992 5H2.009c-1.107 0-2.01.894-2.01 1.997v5.01c0 1.101.899 1.997 2.01 1.997h7.983c1.107 0 2.01-.894 2.01-1.997v-5.01c0-1.101-.9-1.997-2.01-1.997m-.001 1.5c.28 0 .509.223.509.497v5.01a.504.504 0 0 1-.509.497H2.008a.503.503 0 0 1-.508-.497v-5.01c0-.274.228-.497.508-.497h7.983M10 5H8.4V3.938c0-1.3-1.076-2.359-2.4-2.359-1.324 0-2.4 1.059-2.4 2.359V5H2V3.938C2 1.767 3.794 0 6 0s4 1.767 4 3.938V5"></path>
                                </svg>
                            </span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<script>
    $('.navigation .navigation-menu-section-item-link').tooltip({
        placement: 'right',
        container: '.navigation'
    });

    // Event is already set globally
    /* $('.navigation-menu-section-header').click(function(event) {
        $(this).next('.navigation-menu-section-items').slideToggle();
    }); */
</script>
<div class="flex flex-row flex-stretch" style="height: 200px;">
    <nav class="sub-navigation">
        <ul class="sub-navigation-items">
            <li class="sub-navigation-item mod-selected">
                <a href="#" class="sub-navigation-item-link">Avatar</a>
            </li>
            <li class="sub-navigation-item">
                <a href="#" class="sub-navigation-item-link">Titanic</a>
            </li>
            <li class="sub-navigation-item">
                <a href="#" class="sub-navigation-item-link">Star Wars: The Force Awakens</a>
            </li>
            <li class="sub-navigation-item">
                <a href="#" class="sub-navigation-item-link">Jurassic World</a>
            </li>
            <li class="sub-navigation-item">
                <a href="#" class="sub-navigation-item-link">The Avengers</a>
            </li>
        </ul>
    </nav>
</div>

<div class="flex flex-row flex-stretch mt2" style="height: 120px;">
    <nav class="sub-navigation">
        <ul class="sub-navigation-items">
            <li class="sub-navigation-item mod-selected">
                <a href="#" class="sub-navigation-item-link">Avatar</a>
            </li>
            <li class="sub-navigation-item">
                <a href="#" class="sub-navigation-item-link">Titanic</a>
            </li>
            <li class="sub-navigation-item">
                <a href="#" class="sub-navigation-item-link">Star Wars: The Force Awakens</a>
            </li>
            <li class="sub-navigation-item">
                <a href="#" class="sub-navigation-item-link">Jurassic World</a>
            </li>
            <li class="sub-navigation-item">
                <a href="#" class="sub-navigation-item-link">The Avengers</a>
            </li>
        </ul>
    </nav>
</div>

<script>
    $('.sub-navigation a').click(function(event) {
        $(this).closest('.sub-navigation').find('.sub-navigation-item').removeClass('mod-selected');
        $(this).closest('.sub-navigation-item').addClass('mod-selected');

        event.preventDefault();
    });
</script>
<nav class="navigation">
    <div class="navigation-menu" style="max-height: 500px">
        <ul class="navigation-menu-sections">
            <li class="block navigation-menu-section">
                <header class="navigation-menu-section-header">
                    <div class="navigation-loading-item-light-grey mod-navigation-loading-bullet navigation-menu-section-header-icon"></div>
                    <div class="navigation-loading-item-light-grey mod-width-40"></div>
                </header>
                <ul class="navigation-menu-section-items">
                        <div class="navigation-loading-item-grey mod-width-30 mod-sub-navigation-left-margin"></div>
                        <div class="navigation-loading-item-grey mod-width-50 mod-sub-navigation-left-margin"></div>
                        <div class="navigation-loading-item-grey mod-width-40 mod-sub-navigation-left-margin"></div>
                        <div class="navigation-loading-item-grey mod-width-60 mod-sub-navigation-left-margin"></div>
                </ul>
            </li>
            <li class="block navigation-menu-section">
                <header class="navigation-menu-section-header">
                    <div class="navigation-loading-item-light-grey mod-navigation-loading-bullet navigation-menu-section-header-icon"></div>
                    <div class="navigation-loading-item-light-grey mod-width-40"></div>
                </header>
                <ul class="navigation-menu-section-items">
                    <div class="navigation-loading-item-grey mod-width-30 mod-sub-navigation-left-margin"></div>
                    <div class="navigation-loading-item-grey mod-width-50 mod-sub-navigation-left-margin"></div>
                    <div class="navigation-loading-item-grey mod-width-40 mod-sub-navigation-left-margin"></div>
                    <div class="navigation-loading-item-grey mod-width-60 mod-sub-navigation-left-margin"></div>
                </ul>
            </li>
        </ul>
    </div>
</nav>