some styling

dist/assets/a-doc-editor.css

@@ -14,6 +14,17 @@
 .a-doc-editor .header {
     overflow: auto;
     background-color: #f0f0f0;
+    padding: 3px;
+    cursor:default
+}
+.a-doc-editor .header .option{
+    border-bottom: 1px solid rgba(0, 0, 0, 0.137);
+    padding: 1px;
+}
+.a-doc-editor .header .option:hover{
+    padding: 1px;
+    background-color: white;
+    cursor: pointer;
 }
 
 .a-doc-editor .footer {

dist/assets/a-doc-editor.js

@@ -78,9 +78,25 @@ var ADocEditor = function (customConfig) {
         let htmlSetup = /*html*/`
 <div class="a-doc-editor" id="${mainComponentId}">
     <div class="header" id="${headerComponentId}">
-        <div class="menu-bar">Menu bar</div>
-        <div>Formating tools</div>
-        <div>Page tools</div>
+        <div class="option-bar">
+            <span class="option">File</span>
+            <span class="option">Edit</span>
+            <span class="option">Insert</span>
+            <span class="option">Help</span>
+        </div>
+        <div class="option-bar">
+            <span class="option">Search</span>
+            <span class="option">Undo</span>
+            <span class="option">Redo</span>
+            <span class="option">Heading</span>
+            <span class="option">Font Family</span>
+            <span class="option">Font Size</span>
+            <span class="option">Bold</span>
+            <span class="option">Italic</span>
+            <span class="option">Undeline</span>
+            <span class="option">Font Color</span>
+            <span class="option">Highlight Color</span>
+        </div>
     </div>
     <div class="body">
         <div class="scrolling-area" id="${scrollingAreaId}">