Demo - Wijmo Ribbon

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.nav.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="container">
  <h1>
    Wijmo Ribbon
  </h1>
  <p>
    Wijmo 5 does not include a Ribbon control, but you can
    create ribbons easily using the <b>TabPanel</b> control
    and the controls in Wijmo's input module.</p>
  <p>
    This example shows how you can build a simple text editor
    with a custom ribbon.</p>
  <p>
    The ribbon element is a <b>TabPanel</b>. The tab pages
    contain groups of controls arranged in rows and columns.
    Controls in the groups use
    <a href="https://material.io/tools/icons/?style=baseline" target="_blank">Material Icons</a>, and have tooltips created
    automatically based on the <b>aria-label</b> attribute
    assigned to each control.</p>
  <p>
    You can toggle the ribbon content visibility by double-clicking 
    the empty area beside the tab headers.</p>    
  <div>
    <div id="ribbon">

      <!-- Format tab -->
      <div>
        <div>Format</div>
        <div>
          <div class="wj-group">
            <div class="wj-content">
              <div class="wj-column">
                <button id="save" class="wj-btn wj-btn-large">
                  <i class="material-icons">save</i>
                  <br/>
                  Save
                </button>
              </div>
              <div class="wj-column">
                <div class="wj-row">
                  <button id="undo" class="wj-btn" aria-label="Undo">
                    <i...

CSS

.wj-tabpane {
  white-space: nowrap; /* keep groups on a single line */
}
.wj-group {
  display: inline-block;
  border-right: 1px solid #eee;
  padding: 3px 6px 0 3px;
}
.wj-group >.wj-header {
  text-align: center;
  background: transparent;
  font-weight: normal;
  font-size: 80%;
  margin-top: 6px;
}
.wj-group >.wj-content {
  border: none;
  height: 5.5em;
  overflow: visible;
}
.wj-group .wj-column {
  display: inline-block;
  vertical-align: top;
}
.wj-group .wj-row {
  margin-bottom: 2px;
}
.wj-control .wj-group .wj-content .wj-btn {
  font-weight: normal;
  padding: 5px 12px;
}
.wj-group .wj-content .wj-btn.wj-btn-large {
  padding: 2em 1.5em;
}
.wj-group .material-icons {
  font-size: 110%;
  padding-top: 2px;
  pointer-events: none;
}
.wj-group .wj-dropdown {
  width: 10em;
  border: none;
  background: #eee;
}

/* hide ribbon content */
.wj-tabpanel.hide-content .wj-tabpanes {
    height: 0;
    transition: height linear 400ms;
}

#editor {
  height: 300px;
  overflow: auto;
  padding: 12px;
  background: #ffe;
  border: 1px solid #ccc;
}

boady {
  margin-bottom: 36pt;
}

JavaScript

onload = function() {

  // initialize editor element
  var editor = document.getElementById('editor');
  execCommand('styleWithCSS', true);
  if (localStorage.editorContent) {
    document.getElementById('editor').innerHTML = localStorage.editorContent;
  }

  // create ribbon
  var ribbon = new wijmo.nav.TabPanel('#ribbon');
  addTooltips(ribbon);

  // toggle ribbon content visibility on double-clicks, restore on clicks
  document.querySelector('.wj-tabheaders').addEventListener('dblclick', function (e) {
    if (!wijmo.hasClass(e.target, 'wj-tabheader')) {
      wijmo.toggleClass(ribbon.hostElement, 'hide-content');
    }
  });
  document.querySelector('.wj-tabheaders').addEventListener('click', function (e) {
    if (wijmo.hasClass(e.target, 'wj-tabheader')) {
      wijmo.toggleClass(ribbon.hostElement, 'hide-content', false);
    }
  });

  // populate combos
  var fontFace = new wijmo.input.ComboBox('#font-face', {
    itemsSource: 'Arial,Courier New,Garamond,Tahoma,Times,Verdana,WingDings'.split(','),
    textChanged: function(s, e) {
      execCommand('fontName', s.text);
    }
  });
  var fontSize = new wijmo.input.ComboBox('#font-size', {
    itemsSource: 'Very Small,Smaller,Small,Medium,Large,Larger,Very Large'.split(','),
    selectedIndex: 3,
    textChanged: function(s, e) {
      execCommand('fontSize', s.selectedIndex + 1);
    }
  });

  // set up color pickers
  var clrBack = createColorPicker(function(s, e) {
    execCommand('backColor', s.value);
  });
  document.getElementById('background').addEventListener('click', function(e) {
    wijmo.showPopup(clrBack.hostElement, e.target, false, true, false);
    clrBack.focus();
  });
  var clrFore = createColorPicker(function(s, e) {
    execCommand('foreColor', s.value);
  });
  document.getElementById('color').addEventListener('click', function(e) {
    wijmo.showPopup(clrFore.hostElement, e.target, false, true, false);
    clrFore.focus();
  });

  // execute commands
 ...