Boilerplate
The HTML code inside the <body> is a boilerplate that can be used in any project.
The boilerplate consists of 3 main items:
- Topbar
- Sidebar
- Wrapper
Topbar
Unless you have another way of navigating you application, the top bar is mandatory.
Sidebar
The sidebar is optional but it is recommended for applications that needs a deeper level of naviation.
Wrapper
The wrapper is mandatory. Without this the content will not expand / contract smoothly when hiding / showing navigation. All you content is placed inside this wrapper
<div class="kx-topbar-wrapper">
<!.. you content here -->
</div>
Boilerplate
<body>
<div class="kx-topbar-wrapper">
<div class="kx-topbar__logo" title="Poseidon Next">
<a href="./index.html" class="kx-no-link-styling">
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use xlink:href="dist/img/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">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use xlink:href="dist/img/icons.svg#alarm"></use>
</svg>
</i>
</div>
<div class="kx-topbar__tools-item kx-flex" title="My profile" aria-label="My profile">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-moderate kx-js-dropdown__toggle">
<svg focusable="false">
<use xlink:href="dist/img/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">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use xlink:href="dist/img/icons.svg#cog"></use>
</svg>
</i>
</div>
<div class="kx-topbar__tools-item kx-flex" title="Application menu" aria-label="Application menu">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-moderate kx-js-dropdown__toggle">
<svg focusable="false">
<use xlink:href="dist/img/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">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-large">
<svg focusable="false">
<use xlink:href="dist/img/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">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-large">
<svg focusable="false">
<use xlink:href="dist/img/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">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-large">
<svg focusable="false">
<use xlink:href="dist/img/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">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-large">
<svg focusable="false">
<use xlink:href="dist/img/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">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-large">
<svg focusable="false">
<use xlink:href="dist/img/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">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-large">
<svg focusable="false">
<use xlink:href="dist/img/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">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-large">
<svg focusable="false">
<use xlink:href="dist/img/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">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use xlink:href="dist/img/icons.svg#double-chevron-up"></use>
</svg>
</i>
</div>
</div>
</header>
</div>
</div>
<div class="kx-sidebar-wrapper">
<nav class="kx-sidebar kx-two-level-nav">
<ul class="kx-menu">
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__icon">
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use xlink:href="dist/img/icons.svg#box"></use>
</svg>
</i>
</span>
<span class="kx-menu__name">Level 1 item</span>
</a>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__icon">
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use xlink:href="dist/img/icons.svg#box"></use>
</svg>
</i>
</span>
<span class="kx-menu__name">Level 1 item</span>
<span class="kx-menu__icon kx-menu__icon--expand-menu">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="dist/img/icons.svg#chevron-right"></use>
</svg>
</i>
</span>
</a>
<div class="kx-sub-menu-container">
<ul class="kx-menu kx-sub-menu">
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__name">Level 2 item</span>
</a>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__name">Level 2 item</span>
</a>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__name">Level 2 item</span>
</a>
</li>
</ul>
</div>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__icon">
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use xlink:href="dist/img/icons.svg#box"></use>
</svg>
</i>
</span>
<span class="kx-menu__name">Level 1 item</span>
</a>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__icon">
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use xlink:href="dist/img/icons.svg#box"></use>
</svg>
</i>
</span>
<span class="kx-menu__name">Level 1 item</span>
<span class="kx-menu__icon kx-menu__icon--expand-menu">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="dist/img/icons.svg#chevron-right"></use>
</svg>
</i>
</span>
</a>
<div class="kx-sub-menu-container">
<ul class="kx-menu kx-sub-menu">
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__name">Level 2 item</span>
</a>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__name">Level 2 item</span>
</a>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__name">Level 2 item</span>
</a>
</li>
</ul>
</div>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__icon">
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use xlink:href="dist/img/icons.svg#box"></use>
</svg>
</i>
</span>
<span class="kx-menu__name">Level 1 item</span>
</a>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__icon">
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use xlink:href="dist/img/icons.svg#box"></use>
</svg>
</i>
</span>
<span class="kx-menu__name">Level 1 item</span>
</a>
</li>
</ul>
<div class="kx-expand-nav">
<button class="kx-btn kx-btn-expand-nav kx-btn--skin-flat">
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use xlink:href="dist/img/icons.svg#chevron-right"></use>
</svg>
</i>
</button>
</div>
</nav>
</div>
<main class="kx-wrapper kx-has-sidebar">
<div class="kx-container kx-container--ltp-m kx-my--base kx-mx--auto">
<div class="kx-container">
test
</div>
</div>
</main>
</body>