https://github.com/thednp/navbar
🧠Modern Navigation Component
https://github.com/thednp/navbar
menu navbar navigation scss typescript
Last synced: 8 months ago
JSON representation
🧠Modern Navigation Component
- Host: GitHub
- URL: https://github.com/thednp/navbar
- Owner: thednp
- License: mit
- Created: 2016-01-11T10:21:25.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2025-03-26T06:09:24.000Z (over 1 year ago)
- Last Synced: 2025-03-31T14:15:25.647Z (over 1 year ago)
- Topics: menu, navbar, navigation, scss, typescript
- Language: SCSS
- Homepage: http://thednp.github.io/navbar/
- Size: 2.25 MB
- Stars: 53
- Watchers: 10
- Forks: 15
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Navbar - Modern Navigation Component
[](https://coveralls.io/github/thednp/navbar)
[](https://github.com/thednp/navbar/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/@thednp/navbar)
[](http://npm-stat.com/charts.html?package=@thednp/navbar)
[](https://www.jsdelivr.com/package/npm/@thednp/navbar)
[](https://www.typescriptlang.org/)
[](https://vitest.dev/)
[](https://github.com/vitejs)
The mobile first menu navigation for today's modern web, sourced with Typescript and packed with lots of features.
## Demo
Download the package and check the **docs** folder, or check it online [here](http://thednp.github.io/navbar).
# Navbar Highlights
* Mobile First Design
* Accessibility Focus
* TypeScript sourced and powerful build tools
* SCSS sources with flexible mixins and CSS variables
* very light footprint, `5kb` in size when minified
* 3 sets of positions top (main), left or right
* provides a set of options for JavaScript initialization
* DATA API allows you to automatically initiate without JS invocation
* modern browsers supported
## How It Works
**On mobile**
* uses the native events behavior, it requires some elements to click on
* shows the `` element for element visibility toggle
* menu items have a `` element that enables visibility of the submenus
* makes use of the `open-mobile` class to toggle submenus via the `click` handler
**On the desktop**
* hides mobile specific elements and changes event behavior to mouse hover
* opens submenus on `mouseenter`, by adding `open` and `open-position` classes to the menu item, in rapid succession
* hides submenus on `mouseleave`, by removing the above classes in a delayed succesion
On both mobile and desktop, Navbar.js allows for full keyboard navigation via the **TAB** and **SPACE** keys. In addition, directional arrows provide navigation on desktop with RTL support.
## Install
```bash
pnpm install -D @thednp/navbar
```
```bash
yarn add -D @thednp/navbar
```
```bash
npm install -D @thednp/navbar
```
```bash
deno add -D npm:@thednp/navbar@latest
```
## Browser Usage
Download the [latest package](https://github.com/thednp/navbar/archive/master.zip). unpack and inspect the contents. You need to copy the `navbar.js` and `navbar.css` or their minified variations to your app `assets` folders as follows.
Link the required CSS in your document `` tag
```html
```
Link the required JS in your document `` tag, though it should work in the `` as well
```html
```
Initiate the function for your elements at the end of your `` tag
```html
var myMenu = new Navbar('selector');
```
To use the DATA-API, you need to provide the `data-function="navbar"` attribute to your navbar, like so:
```html
```
Alternatively you can use only the menu itself and use the specific attribute:
```html
```
Other initialization and markup options apply, explained in [the demo](http://thednp.github.io/navbar/).
## Typescript / ES
```ts
import Navbar from '@thednp/navbar'
const myNav = new Navbar('#myNav')
```
## License
Navbar is released under [MIT License](https://github.com/thednp/navbar/blob/master/LICENSE).