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.

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>