Topbar

HTML

<div class="kx-topbar-wrapper">
    <div class="kx-topbar__logo" title="Poseidon Next">
        <a href="#" class="kx-no-link-styling">
            <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#logo-pnext"></use>
        </svg>
    </i>
        </a>
    </div>

    <header class="kx-topbar kx-flex">
        <div class="kx-topbar__title">
            Page Name
        </div>

        <!-- applications custom content goes here -->
        <div class="kx-topbar__app-content kx-topbar__app-content--has-content">
            Custom content goes here
        </div>

        <div class="kx-topbar__tools kx-flex kx-flex-row" role="group">
            <div class="kx-topbar__tools-item kx-flex" title="Notifications">
                <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#alarm"></use>
        </svg>
    </i>
            </div>

            <div class="kx-topbar__tools-item kx-flex" title="My profile" aria-label="My profile">
                <i class="kx-icon kx-icon--size-moderate kx-js-dropdown__toggle">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#person"></use>
        </svg>
    </i>
                <div class="kx-dropdown__menu kx-dropdown__menu--align-right">
                    <ul class="kx-dropdown__list">
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="">
                                <span class="kx-dropdown__item__txt">My account</span>
                            </a>
                        </li>
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="">
                                <span class="kx-dropdown__item__txt">Acess managment</span>
                            </a>
                        </li>
                        <li aria-hidden="true" class="kx-divider kx-divider--size-mini" tabindex="-1"></li>
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link">
                                <span class="kx-dropdown__item__txt">Logout</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="kx-topbar__tools-item kx-flex" title="Settings" aria-label="Settings">
                <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#cog"></use>
        </svg>
    </i>
            </div>

            <div class="kx-topbar__tools-item kx-flex" title="Application menu" aria-label="Application menu">
                <i class="kx-icon kx-icon--size-moderate kx-js-dropdown__toggle">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#app-store"></use>
        </svg>
    </i>
                <div class="kx-app-selector-container kx-dropdown kx-dropdown__menu--align-right">
                    <div class="kx-app-selector kx-shadow-3">
                        <ul class="kx-app-list">
                            <li class="kx-app-list__item" title="Vessel insight">
                                <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                                    <div class="kx-app-list__logo">
                                        <img src="/assets/img/gfx/logo-vessel-insight.png" alt="Vessel Insight" />
                                    </div>

                                    <div class="kx-app-list__name">Vessel insight</div>
                                </a>
                            </li>
                            <li class="kx-app-list__item" title="Data Analysis">
                                <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                                    <div class="kx-app-list__logo kx-app-list__logo--icon">
                                        <i class="kx-icon kx-icon--size-large">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#charts"></use>
        </svg>
    </i>
                                    </div>

                                    <div class="kx-app-list__name">Data Analysis</div>
                                </a>
                            </li>
                            <li class="kx-app-list__item" title="Customer Onboarding">
                                <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                                    <div class="kx-app-list__logo kx-app-list__logo--icon">
                                        <i class="kx-icon kx-icon--size-large">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#support"></use>
        </svg>
    </i>
                                    </div>

                                    <div class="kx-app-list__name">Customer Onboarding</div>
                                </a>
                            </li>
                            <li class="kx-app-list__item" title="Dashboard Builder">
                                <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                                    <div class="kx-app-list__logo kx-app-list__logo--icon">
                                        <i class="kx-icon kx-icon--size-large">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#config"></use>
        </svg>
    </i>
                                    </div>

                                    <div class="kx-app-list__name">Dashboard Builder</div>
                                </a>
                            </li>
                            <li class="kx-app-list__item" title="Test pages">
                                <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                                    <div class="kx-app-list__logo kx-app-list__logo--icon">
                                        <i class="kx-icon kx-icon--size-large">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#text"></use>
        </svg>
    </i>
                                    </div>

                                    <div class="kx-app-list__name">Test pages</div>
                                </a>
                            </li>
                            <li class="kx-app-list__item" title="Cost Optimazation">
                                <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                                    <div class="kx-app-list__logo kx-app-list__logo--placeholder">
                                        <div class="kx-icon-placeholder__name">CO</div>
                                    </div>

                                    <div class="kx-app-list__name">Cost Optimazation</div>
                                </a>
                            </li>
                            <li class="kx-app-list__item" title="Test App 7">
                                <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                                    <div class="kx-app-list__logo kx-app-list__logo--icon">
                                        <i class="kx-icon kx-icon--size-large">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#box"></use>
        </svg>
    </i>
                                    </div>

                                    <div class="kx-app-list__name">Test App 7</div>
                                </a>
                            </li>
                            <li class="kx-app-list__item" title="Test App 8">
                                <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                                    <div class="kx-app-list__logo kx-app-list__logo--icon">
                                        <i class="kx-icon kx-icon--size-large">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#box"></use>
        </svg>
    </i>
                                    </div>

                                    <div class="kx-app-list__name">Test App 8</div>
                                </a>
                            </li>
                            <li class="kx-app-list__item" title="Test App 9">
                                <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                                    <div class="kx-app-list__logo kx-app-list__logo--icon">
                                        <i class="kx-icon kx-icon--size-large">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#box"></use>
        </svg>
    </i>
                                    </div>

                                    <div class="kx-app-list__name">Test App 9</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="kx-topbar__tools-item kx-flex kx-toggle-navigation" title="Hide navigation" aria-label="Hide Navigation">
                <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#double-chevron-up"></use>
        </svg>
    </i>
            </div>

        </div>
    </header>
</div>

View

<div class="kx-topbar-wrapper">
    <div class="kx-topbar__logo" title="Poseidon Next">
        <a href="#" class="kx-no-link-styling">
            {% render '@icon', {type: 'icon', symbol: 'logo-pnext', size: 'moderate' } %}
        </a>
    </div>

    <header class="kx-topbar kx-flex">
        <div class="kx-topbar__title">
            Page Name
        </div>

        <!-- applications custom content goes here -->
        <div class="kx-topbar__app-content kx-topbar__app-content--has-content">
            Custom content goes here
        </div>

        <div class="kx-topbar__tools kx-flex kx-flex-row" role="group">
            <div class="kx-topbar__tools-item kx-flex" title="Notifications">
                {% render '@icon', {type: 'icon', symbol: 'alarm', size: 'moderate' } %}
            </div>

            <div class="kx-topbar__tools-item kx-flex" title="My profile" aria-label="My profile">
                {% render '@icon', {type: 'icon', symbol: 'person', size: 'moderate', classes: ['kx-js-dropdown__toggle'] } %}
                <div class="kx-dropdown__menu kx-dropdown__menu--align-right">
                    <ul class="kx-dropdown__list">
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="">
                                <span class="kx-dropdown__item__txt">My account</span>
                            </a>
                        </li>
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="">
                                <span class="kx-dropdown__item__txt">Acess managment</span>
                            </a>
                        </li>
                        <li aria-hidden="true" class="kx-divider kx-divider--size-mini" tabindex="-1"></li>
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link">
                                <span class="kx-dropdown__item__txt">Logout</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="kx-topbar__tools-item kx-flex" title="Settings" aria-label="Settings">
                {% render '@icon', {type: 'icon', symbol: 'cog', size: 'moderate' } %}
            </div>

            <div class="kx-topbar__tools-item kx-flex" title="Application menu" aria-label="Application menu">
                {% render '@icon', {type: 'icon', symbol: 'app-store', size: 'moderate', classes: ['kx-js-dropdown__toggle'] } %}
                <div class="kx-app-selector-container kx-dropdown kx-dropdown__menu--align-right">
                    {% render '@app-selector', {items: appItems} %}
                </div>
            </div>

            <div class="kx-topbar__tools-item kx-flex kx-toggle-navigation" title="Hide navigation" aria-label="Hide Navigation">
                {% render '@icon', {type: 'icon', symbol: 'double-chevron-up', size: 'moderate' } %}
            </div>

        </div>
    </header>
</div>