We begin by creating a new Markdown document in the Root folder and call it Menu.md. In it, we add the headers that we want all detail pages to have. We, therefore, move the CSS file to the Menu.md file, since we want all pages to have the same design. We can also define an Icon header.

We then go on to provide the general disposition of the page, using the HTML5 elements header, nav, main, and footer. We define the menu using a bullet-point list. This list is rendered to ul and li tags respectively. We can use the CSS file to transform this bullet-point list into a nicer-looking menu system. If a bullet contains a single link, pointing to the detail file being viewed, it will be marked using the active class name in HTML. This allows us to provide special styling for those elements dynamically in CSS.

Finally, we use the special [%Details] metadata reference on the location in the file where we want the detail Markdown page to be inserted. The result may look as follows. Note that we need the empty rows to allow the Markdown parser to separate the corresponding blocks into logical blocks:

CSS: Main.css 
Icon: /favicon.ico 
 
<header id="header"> 
<nav> 
 
* [Momentary](/Index.md) 
* [History](/History.md) 
* [%Title] 
* [Mastering IoT](https://github.com/PeterWaher/MIoT) 
* [IoT Gateway](https://github.com/PeterWaher/IoTGateway) 
 
</nav> 
</header> 
<main> 
 
[%Details] 
 
</main> 
 
<footer> 
This application is part of the [Mastering Internet of Things](https://github.com/PeterWaher/MIoT) book. 
</footer>