# Add Custom Links into Header-Menu

[![free-reddit-logo-icon-2436-thumb.png](https://wiki.aeoneros.com/uploads/images/gallery/2024-09/scaled-1680-/edj6aiFATPGBFuCC-free-reddit-logo-icon-2436-thumb.png)](https://www.reddit.com/r/BookStack/comments/18hwe44/howto_add_custom_links_to_the_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:

[![2024-09-08 18_09_56-Editing Page Add Custom Links into ... _ Knowledge Base - Brave.png](https://wiki.aeoneros.com/uploads/images/gallery/2024-09/scaled-1680-/QPTEzarALSTC1Q8T-2024-09-08-18-09-56-editing-page-add-custom-links-into-knowledge-base-brave.png)](https://wiki.dndforge.ch/uploads/images/gallery/2024-09/QPTEzarALSTC1Q8T-2024-09-08-18-09-56-editing-page-add-custom-links-into-knowledge-base-brave.png)

  
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":

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/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>
```

<p class="callout info">Please change the Icon and the Link to your Website ;)</p>

<p class="callout success">The Result would look like this:</p>

[![2024-09-08 18_12_52-Editing Page Add Custom Links into ... _ Knowledge Base - Brave.png](https://wiki.aeoneros.com/uploads/images/gallery/2024-09/scaled-1680-/FPb3cCwQCShv34mI-2024-09-08-18-12-52-editing-page-add-custom-links-into-knowledge-base-brave.png)](https://wiki.dndforge.ch/uploads/images/gallery/2024-09/FPb3cCwQCShv34mI-2024-09-08-18-12-52-editing-page-add-custom-links-into-knowledge-base-brave.png)