<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>
<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>
{
"appItems": [
{
"name": "Vessel insight",
"img": "/assets/img/gfx/logo-vessel-insight.png",
"icon": null,
"link": "https://yoursite.com/yourapplication"
},
{
"name": "Data Analysis",
"img": null,
"icon": "charts",
"link": "https://yoursite.com/yourapplication"
},
{
"name": "Customer Onboarding",
"img": null,
"icon": "support",
"link": "https://yoursite.com/yourapplication"
},
{
"name": "Dashboard Builder",
"img": null,
"icon": "config",
"link": "https://yoursite.com/yourapplication"
},
{
"name": "Test pages",
"img": null,
"icon": "text",
"link": "https://yoursite.com/yourapplication"
},
{
"name": "Cost Optimazation",
"img": null,
"icon": null,
"abr": "CO",
"link": "https://yoursite.com/yourapplication"
},
{
"name": "Test App 7",
"img": null,
"icon": "box",
"link": "https://yoursite.com/yourapplication"
},
{
"name": "Test App 8",
"img": null,
"icon": "box",
"link": "https://yoursite.com/yourapplication"
},
{
"name": "Test App 9",
"img": null,
"icon": "box",
"link": "https://yoursite.com/yourapplication"
}
]
}
- Handle: @topbar
- Preview:
- Filesystem Path: src\components\topbar\topbar.njk
- References (2): @icon, @app-selector
Logos in the header
If you’d like to use a custom logo, please make sure it is an image that has a transparent background. This will look better agains the dark header.
In this example we clearly see that the logofile is an opaquq image with white background. It looks suboptimal on the dark header.
Instead use a 24-bit PNG format or SVG. Transparent GIFs may also work, but since
the maximum number of colors in this filetype, be sure to export it against a matte
color that matches the header background (#1a293e).
As an alternative, if you don’t have a high quality logotype, you can use a logomark instead. Combine the logomark with a text-based title.
What is the difference between a logo, logomark and logotype