An HTML custom element implementing the <top-nav> element.

npm i top-nav

<script src="node_modules/top-nav/top-nav.js"></script>

or if you're bundling

import "top-nav";
// or
require("top-nav");

<top-nav>
    <!-- Your content here -->
</top-nav>

You can customize the color of the top-nav by assigning values to css elements.

The CSS custom properties that affect top-nav are --top-nav-color, --primary-color, --top-nav-padding, --top-nav-text-color.

You can set there values like so

    :root {
        --top-nav-color: red; /* if both are set --top-nav-color takes precedence */
        --primary-color: red; 
        --top-nav-padding: 30px; /* (optional) defaults to 20px */
        --top-nav-text-color: black; /* (optional) defaults to white */
    }