heavy-navbar is a responsive menu component built with customization in mind.
heavy-navbar can be used wherever custom elements can be used.
heavy-navbar can be added to the head of your html document with the following script tag
<script src='https://unpkg.com/[email protected]/dist/heavynavbar.js'></script>The latest version can always be used using the following tag (Please note that using the latest tag could contain breaking changes)
<script src='https://unpkg.com/heavy-navbar@latest/dist/heavynavbar.js'></script>the latest pre-release version can be also added
<script src='https://unpkg.com/heavy-navbar@next/dist/heavynavbar.js'></script>Install your node module
npm install heavy-navbar --save
pre-release
npm install heavy-navbar@next --save
once installed you can add a script tag to the head of your html document
<script src='node_modules/heavy-navbar/dist/heavynavbar.js'></script>To put a blank navbar into your page ad the following HTML tag
<heavy-navbar></heavy-navbar> Adding menu bar items can be done in one of two ways. Slot based or Property based
Slot based is done by setting the item-count attribute with the amount of items you are passing in,
then adding the anchor tags inside the root tag. Each anchor tag needs a slot attribute to appear in the navbar.
<heavy-navbar item-count="4">
<a href="#" slot="item-1">Home</a>
<a href="#about" slot="item-2">About</a>
<a href="#blog" slot="item-3">Blog</a>
<a href="#contact" slot="item-4">Contact</a>
</heavy-navbar>Property based insertion takes a json array with both a name and a url property. This is done by setting the menuItems property on heavy-navbar.
const heavyNavBar = document.querySelector(heavy-navbar);
heavyNavBar.menuItems = [
{"name":"Home","url":"/"},
{"name":"About","url":"/about"},
{"name":"Blog","url":"/url"},
{"name":"Contact","url":"/contact"}
]A JSON array can also be passed in via the menu-items attribute
<heavy-navbar menu-items='[
{"name":"Home","url":"/"},
{"name":"About","url":"/about"},
{"name":"Blog","url":"/url"},
{"name":"Contact","url":"/contact"}
]'>
</heavy-navbar>heavy-navbar uses css variables to expose options to change. To make changes to heavy-navbar you can add styling to your page's css file.
heavy-navbar {
--heavy-navbar-background: #ffffff;
--heavy-navbar-color: #000000;
--heavy-navbar-hover-color: #333333;
}heavy-navbar can be positioned in multiple ways.
- Fixed: will be fixed to the top of the screen.
<heavy-navbar item-count="4" position="fixed">
<a href="#" slot="item-1">Home</a>
<a href="#about" slot="item-2">About</a>
<a href="#blog" slot="item-3">Blog</a>
<a href="#contact" slot="item-4">Contact</a>
</heavy-navbar>- Fixed with scroll: like fixed will be fixed to the top of the page, but will auto hide on scroll.
<heavy-navbar item-count="4" position="fixed-scroll">
<a href="#" slot="item-1">Home</a>
<a href="#about" slot="item-2">About</a>
<a href="#blog" slot="item-3">Blog</a>
<a href="#contact" slot="item-4">Contact</a>
</heavy-navbar>- Scroll: Will scroll with the page.
<heavy-navbar item-count="4" position="scroll">
<a href="#" slot="item-1">Home</a>
<a href="#about" slot="item-2">About</a>
<a href="#blog" slot="item-3">Blog</a>
<a href="#contact" slot="item-4">Contact</a>
</heavy-navbar>Adding a logo in as easy as passing a path in via the logo attribute.
<heavy-navbar item-count="4" position="scroll" logo="/images/logo.png">
<a href="#" slot="item-1">Home</a>
<a href="#about" slot="item-2">About</a>
<a href="#blog" slot="item-3">Blog</a>
<a href="#contact" slot="item-4">Contact</a>
</heavy-navbar>