How to use bootstrap navbar and still have a good pagespeed

I'm working as a sitebuilder, JavaScript is not my most powerful skill, mostly I just add, remove or toggle some classes with it.

But sometimes if you need to improve the speed of your page, you have to write your own JavaScript.

TLDR: You can find my solution at the and of this post for the bootstrap navbar, and you only have to include bootstrap css. It is working with bootstrap 4 and 5, but maybe you can create your own responsive and accessible navigation with dropdown menus based on this.

The confession

I use bootstrap in all of my projects, but I only use it's grid, display, margin, padding, etc. classes, aaaaand the navbar.

The reason

The bootstrap navbar is easy to customize, it's accessible, and well done. So it's enough for most of my projects.

The problem

My only problem was, that I had to include bootstrap.js, popper.js and jquery and eventhough I only use them for the navbar, they are sloving down the pages heavily.

The solution

I created my version for the navbar, what you can see here:

Give me feedback in the comments. :)