Navbar Modern Navigation Component

npm install @thednp/navbar

The mobile first menu navigation for today's modern web, developed with next generation JavaScript and packed with lots of features.

Download Fork

Typescript Source

The component was redesigned for the latest tools and modern applications and comes packed fully featured. In addition, build tools and sources are provided so you can get started working on your application right away.

Simple & Light Scripting

Navbar is meant to be simple, fast, reliable and easy to implement, all in a very light footprint.

DATA API

Initialize automatically and set options for your target elements via DATA API.

SCSS Sources with CSS Variables

Customize the SCSS variables and make it your way, then change the CSS variables dynamically for every page and / or instance for an advanced design language.

Mobile First Design

The navbar component was redesigned to be a viable mobile first solution.

Accessibility

Since our Navbar 3.0 version release, we've moved the focus on accessibility.

Modern Browsers Love It

In the redesign process we've put everything modern to the table for the best script execution performance and the optimal rendering load.

Well Documented

As always well documented and filled with tips and cookies.

MIT Licensed

The component is released under the MIT License.

Documentation

Get started with Navbar:

Markup - breaks down the markup and Navbar components;
DATA API - explains how to initialize or set options via data attributes;
JavaScript API - explains how to initialize, set options, attach event handles or dispose Navbar instances;
Mega Menu - explains the markup required in order to enable Mega Menu layout;
SCSS Sources - breaks down the mixins and variables used with the default demo;
RTL Languages - explains how to enable Navbar for RTL Languages.
Accessibility - explains all about WAI-ARIA compliance.

More Demos

Explore more Navbar demos:

Left Navbar - showcases the LEFT SIDE column view of the Navbar layout;
Right Navbar - showcases the RIGHT SIDE column view of the Navbar layout;
Left Menu - showcases the LEFT SIDE column view of only the menu layout, without the Navbar wrapper;
Combined Layout - showcases the combination of SCSS mixins to create styling to support both TOP default view and SIDE column view of the Navbar layout and menus;
Bootstrap - showcases the dedicated SCSS mixins to create a seamless integration of the Navbar menu with the original Bootstrap Navbar wrapper and markup;
Bootstrap Extended - showcases the full Navbar layout design and markup in a Bootstrap styled page.