Add Custom Links into Header-Menu

If you want to add Custom Links to your Bookstack Navigationbar / Header-Menu you need to use the
Settings-Page from your Bookstack.

As Default it would look like this:

 

Lets Say you want to add a "Buy me a Coffee" Link for People to Support your work or whatever else you need to open the Bookstack "Settings-Page" from your Wiki and then open the "Customization" Tab, scroll to the Bottom of the Page and insert the following Code into the "Custom Code Section":

<link rel="stylesheet" href="https://www.reddit.cdnjs.cloudflare.com/r/BookStack/comments/18hwe44/howto_add_custom_links_to_the_header_menu/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<!-- CUSTOM HEADER LINKS -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Create the coffee icon using Font Awesome
    var coffeeIcon = document.createElement('i');
    coffeeIcon.className = 'fas fa-coffee'; // Font Awesome coffee icon class

    // Create the link element
    var top1Link = document.createElement('a');
    top1Link.href = 'https://yourwebsite.tld/yourlink';

    // Append the icon to the link
    top1Link.appendChild(coffeeIcon);

    // Add a space and the text after the icon
    top1Link.appendChild(document.createTextNode(' Buy me a Coffee'));

    var linksContainer = document.querySelector('.links.text-center');

    // Place the link in the correct position.
    linksContainer.insertBefore(top1Link, linksContainer.firstChild);
});
</script>

Please change the Icon and the Link to your Website ;)

 

The Result would look like this;