open-index/open-npm huggingface dataset:
npm package: @hickorybrands/hbi-brands-nav-bar
Description: 1. Inject the loading script in the head (ideally) of the website ```diff <head>     <title>My Website</title> +   <script src="https://unpkg.com/@hickorybrands/hbi-brands-nav-bar" /> </head> ``` 2. Create a div with an id of your choice where you 
Latest version: 1.0.3

# hbi-brands-nav-bar

## A loader script to inject a Hickory Brands Nav Bar component on a page


### Usage on any website

1. Inject the loading script in the head (ideally) of the website
```diff
<head>
    <title>My Website</title>
+   <script src="https://unpkg.com/@hickorybrands/hbi-brands-nav-bar" />
</head>
```
2. Create a div with an id of your choice where you want to display the navbar, it should be a full width element ideally.
```diff
    <body>
+       <div id="brands-navbar"></div>
        <>Some other existing content.</p>
```
3. Initialize the loader as follows (ideally near the end of the body) passing the css selector of the element in inject the navbar into.
```diff
        <p>Some existing content</p>
+       <script type="text/javascript">
+        document.addEventListener("DOMContentLoaded", () => {
+            const loader = new HbiBrandsNavBar({ selector: "#brands-navbar" });
+            loader.load();
+        });
+    </script>
    </body>
```

Full change example:
```diff
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Website</title>
+        <script src="https://unpkg.com/@hickorybrands/hbi-brands-nav-bar"></script>
    </head>
    <body>
+       <div id="brands-navbar">
        <header>My Website</header>
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
        </nav>
        <main>
            <div class="pane">
                <h2>Pane 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </main>
        <footer>
            <p>Copyright ...</p>
        </footer>
+       <script type="text/javascript">
+        document.addEventListener("DOMContentLoaded", () => {
+            const loader = new HbiBrandsNavBar({ selector: "#brands-navbar" });
+            loader.load();
+        });
+    </script>
    </body>
</html>
```