{"id":17002484,"url":"https://github.com/thednp/navbar","last_synced_at":"2025-10-25T00:03:36.602Z","repository":{"id":57308982,"uuid":"49418430","full_name":"thednp/navbar","owner":"thednp","description":"🧭 Modern Navigation Component","archived":false,"fork":false,"pushed_at":"2025-03-26T06:09:24.000Z","size":2360,"stargazers_count":53,"open_issues_count":3,"forks_count":15,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-31T14:15:25.647Z","etag":null,"topics":["menu","navbar","navigation","scss","typescript"],"latest_commit_sha":null,"homepage":"http://thednp.github.io/navbar/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thednp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["thednp"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2016-01-11T10:21:25.000Z","updated_at":"2025-01-22T06:54:02.000Z","dependencies_parsed_at":"2023-02-01T05:16:13.813Z","dependency_job_id":"c6dbd275-aea5-4bb6-abb4-d313dd97d494","html_url":"https://github.com/thednp/navbar","commit_stats":{"total_commits":183,"total_committers":3,"mean_commits":61.0,"dds":0.3770491803278688,"last_synced_commit":"02f32e808ec98adfcd6b0852fedede3e4a2ae3e7"},"previous_names":["thednp/navbar.js"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thednp%2Fnavbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thednp%2Fnavbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thednp%2Fnavbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thednp%2Fnavbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thednp","download_url":"https://codeload.github.com/thednp/navbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247675596,"owners_count":20977376,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["menu","navbar","navigation","scss","typescript"],"created_at":"2024-10-14T04:28:10.754Z","updated_at":"2025-10-25T00:03:36.594Z","avatar_url":"https://github.com/thednp.png","language":"SCSS","funding_links":["https://github.com/sponsors/thednp"],"categories":[],"sub_categories":[],"readme":"# Navbar - Modern Navigation Component\r\n[![Coverage Status](https://coveralls.io/repos/github/thednp/navbar/badge.svg)](https://coveralls.io/github/thednp/navbar)\r\n[![ci](https://github.com/thednp/navbar/actions/workflows/ci.yml/badge.svg)](https://github.com/thednp/navbar/actions/workflows/ci.yml)\r\n[![NPM Version](https://img.shields.io/npm/v/@thednp/navbar.svg)](https://www.npmjs.com/package/@thednp/navbar)\r\n[![NPM Downloads](https://img.shields.io/npm/dm/@thednp/navbar.svg)](http://npm-stat.com/charts.html?package=@thednp/navbar)\r\n[![jsDeliver](https://data.jsdelivr.com/v1/package/npm/@thednp/navbar/badge)](https://www.jsdelivr.com/package/npm/@thednp/navbar)\r\n[![typescript version](https://img.shields.io/badge/typescript-5.8.3-brightgreen)](https://www.typescriptlang.org/)\r\n[![vitest version](https://img.shields.io/badge/vitest-3.1.4-brightgreen)](https://vitest.dev/)\r\n[![vite version](https://img.shields.io/badge/vite-6.3.5-brightgreen)](https://github.com/vitejs)\r\n\r\nThe mobile first menu navigation for today's modern web, sourced with Typescript and packed with lots of features.\r\n\r\n\r\n## Demo\r\nDownload the package and check the **docs** folder, or check it online [here](http://thednp.github.io/navbar).\r\n\r\n# Navbar Highlights\r\n* Mobile First Design\r\n* Accessibility Focus\r\n* TypeScript sourced and powerful build tools\r\n* SCSS sources with flexible mixins and CSS variables\r\n* very light footprint, `5kb` in size when minified\r\n* 3 sets of positions top (main), left or right\r\n* provides a set of options for JavaScript initialization\r\n* DATA API allows you to automatically initiate without JS invocation\r\n* modern browsers supported\r\n\r\n\r\n## How It Works\r\n**On mobile**\r\n  * uses the native events behavior, it requires some elements to click on\r\n  * shows the `\u003cbutton class=\"navbar-toggle\"\u003e` element for element visibility toggle\r\n  * menu items have a `\u003cbutton class=\"subnav-toggle\"\u003e` element that enables visibility of the submenus\r\n  * makes use of the `open-mobile` class to toggle submenus via the `click` handler\u003c/li\u003e\r\n\r\n**On the desktop**\r\n  * hides mobile specific elements and changes event behavior to mouse hover\r\n  * opens submenus on `mouseenter`, by adding `open` and `open-position` classes to the menu item, in rapid succession\u003c/li\u003e\r\n  * hides submenus on `mouseleave`, by removing the above classes in a delayed succesion\u003c/li\u003e\r\n\r\nOn 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.\r\n\r\n## Install\r\n```bash\r\npnpm install -D @thednp/navbar\r\n```\r\n\r\n```bash\r\nyarn add -D @thednp/navbar\r\n```\r\n\r\n```bash\r\nnpm install -D @thednp/navbar\r\n```\r\n\r\n```bash\r\ndeno add -D npm:@thednp/navbar@latest\r\n```\r\n\r\n\r\n## Browser Usage\r\nDownload 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.\r\nLink the required CSS in your document `\u003chead\u003e` tag\r\n```html\r\n\u003clink href=\"../assets/css/navbar.css\" rel=\"stylesheet\"\u003e\r\n```\r\n\r\nLink the required JS in your document  `\u003cbody\u003e` tag, though it should work in the `\u003chead\u003e` as well\r\n```html\r\n\u003cscript src=\"../assets/js/navbar.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\nInitiate the function for your elements at the end of your `\u003cbody\u003e` tag\r\n```html\r\n\u003cscript\u003e\r\nvar myMenu = new Navbar('selector');\r\n\u003c/script\u003e\r\n```\r\n\r\nTo use the DATA-API, you need to provide the `data-function=\"navbar\"` attribute to your navbar, like so:\r\n```html\r\n\u003cnav class=\"navbar\" data-function=\"navbar\"\u003e\r\n  \u003ca href=\"#\" title=\"App Name\"\u003eBrand Name\u003c/a\u003e\r\n  \u003cbutton class=\"navbar-toggle\"\u003e\r\n    \u003ci class=\"menu-icon\"\u003e\u003c/i\u003e\r\n  \u003c/button\u003e\r\n  \u003cdiv\u003e\r\n    \u003cul class=\"nav\"\u003e\r\n      \u003cli\u003e\u003ca href=\"#\"\u003eLink Title\u003c/a\u003e\u003c/li\u003e\r\n      \u003cli\u003e\u003ca href=\"#\"\u003eAnother Link Title\u003c/a\u003e\u003c/li\u003e\r\n    \u003c/ul\u003e\r\n  \u003c/div\u003e\r\n\u003c/nav\u003e\r\n```\r\n\r\nAlternatively you can use only the menu itself and use the specific attribute:\r\n\r\n```html\r\n\u003cdiv class=\"sidebar\"\u003e\r\n  \u003cul class=\"nav\" data-function=\"navbar\"\u003e\r\n    \u003cli\u003e\u003ca href=\"#\"\u003eLink Title\u003c/a\u003e\u003c/li\u003e\r\n    \u003cli\u003e\u003ca href=\"#\"\u003eAnother Link\u003c/a\u003e\u003c/li\u003e\r\n  \u003c/ul\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nOther initialization and markup options apply, explained in [the demo](http://thednp.github.io/navbar/).\r\n\r\n\r\n## Typescript / ES\r\n```ts\r\nimport Navbar from '@thednp/navbar'\r\n\r\nconst myNav = new Navbar('#myNav')\r\n```\r\n\r\n\r\n## License\r\nNavbar is released under [MIT License](https://github.com/thednp/navbar/blob/master/LICENSE).\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthednp%2Fnavbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthednp%2Fnavbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthednp%2Fnavbar/lists"}