Minimal-navbar NPM

minimal-navbar

A simple yet powerful Navigation Bar web-component that can be added to your website to navigate between web pages.

The widget is:

Responsive - You can set a width in pixels using the breakpoint property. When the viewport width is below the breakpoint, the navbar changes to a mobile version.
Themable - You can use css variables to set the theme colors for the widget. See the list of css variables below.
Light-weight and Performant - Built using the LIT framework.

Live Demo

Installation

npm install minimal-navbar --save

Usage

// In index.js
import MinimalNavbar from 'minimal-navbar';

<!DOCTYPE html>
<head>
    <script src="./index.js"></script>
</head>
<body>
    <minimal-navbar></minimal-navbar>
</body>
</html>

/**
 * @property breakpoint {Number} - The width in pixels below which the Navbar displays in mobile mode.
 *
 * @slot brand - A link to the brand of the website
 * @slot link - Navigation links
 *  
 * @fires activeLinkChanged - Fired when a link is selected
 *
 * @cssproperty --hamburger-stripe-color - Color of the stripes in the hamburger menu
 * @cssproperty --navbar-shadow - Box shadow for the Navbar, default: 0 1px 2px rgb(0 0 0 / 50%)
 * @cssproperty --navbar-height - Height of the Navbar, default: 75px
 * @cssproperty --navbar-font-size - Font size of the Navbar, default: 16px
 * @cssproperty --navbar-font-family - Font family of the Navbar, default: "Exo 2", sans-serif
 * @cssproperty --navbar-bg-color - Background color of the Navbar, default: #FFFFFF
 * @cssproperty --navbar-menu-color - Background color of the links, default: #FFFFFF
 * @cssproperty --navbar-link-color - Color of the links, default: #58595B
 * @cssproperty --navbar-highlight-color - Color of the title and links, default: #E65446
 * @cssproperty --navbar-link-active-color - Color of the links, default: #333333
 */

navbar header navbar navigation bar navigation lit

lit

@everything-registry/sub-chunk-2174

1.0.0

12 months ago