@hickorybrands/hbi-brands-nav-bar
v1.0.3
Published
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
Readme
hbi-brands-nav-bar
A loader script to inject a Hickory Brands Nav Bar component on a page
Usage on any website
- Inject the loading script in the head (ideally) of the website
<head>
<title>My Website</title>
+ <script src="https://unpkg.com/@hickorybrands/hbi-brands-nav-bar" />
</head>- Create a div with an id of your choice where you want to display the navbar, it should be a full width element ideally.
<body>
+ <div id="brands-navbar"></div>
<>Some other existing content.</p>- Initialize the loader as follows (ideally near the end of the body) passing the css selector of the element in inject the navbar into.
<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:
<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>