heavy-navbar

heavy-navbar is a responsive menu component built with customization in mind.

Installation

heavy-navbar can be used wherever custom elements can be used.

Script Tag

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>

Node Modules

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>

Usage

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>

Appearance

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;
}

Position

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>

Logo

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>