{"id":16255284,"url":"https://github.com/qubyte/navbar","last_synced_at":"2025-07-30T21:04:22.493Z","repository":{"id":21551906,"uuid":"24871567","full_name":"qubyte/navbar","owner":"qubyte","description":"A tiny library to create nav elements that smart update on scroll to keep the correct item active. Fast, supports older browsers, and has no dependencies.","archived":false,"fork":false,"pushed_at":"2024-10-11T13:49:34.000Z","size":639,"stargazers_count":10,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-28T05:54:26.848Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://qubyte.github.io/navbar","language":"JavaScript","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/qubyte.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2014-10-07T00:51:22.000Z","updated_at":"2024-10-11T13:49:36.000Z","dependencies_parsed_at":"2024-03-28T19:27:22.858Z","dependency_job_id":"7719a4c9-822b-4e4c-b2f3-6105003d5645","html_url":"https://github.com/qubyte/navbar","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qubyte%2Fnavbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qubyte%2Fnavbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qubyte%2Fnavbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qubyte%2Fnavbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qubyte","download_url":"https://codeload.github.com/qubyte/navbar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244056406,"owners_count":20390719,"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":[],"created_at":"2024-10-10T15:29:17.220Z","updated_at":"2025-03-19T21:30:40.593Z","avatar_url":"https://github.com/qubyte.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# navbar\n\n`navbar` is a tiny library to help you create navigation bars that listen for\nscroll events and calculate which element is closest to the top left of the\nwindow, giving the associated navigation list item a `navbar-active` class.\nYou feed it a list of elements and a function that returns `navbar` list items,\nand it returns a `nav` element populated with navigation items. You can dress\nthis up with CSS to make it look how you like.\n\nIt may not look like it's doing much, but it's fiddly stuff. For a demonstration\nopen `demo.js` in your (recent version) browser.\n\n## Installation\n\nThis library is provided as an ES module. If you require a UMD build, please\nuse version 2. This library has no production dependencies so using it with a\nbundler or directly in the browser requires no further setup.\n\nWhere available, this library will use passive event listeners to make scrolling\nsliky smooth.\n\nThis library should support any browser that implements\n`EventTarget.addEventListener` or `EventTarget.attachEvent`, which should cover\nalmost any browser in use today, and certainly IE \u003e= 6. If you find that navbar\ndoes not support a browser newer than IE6 then I consider it a bug, so please\nopen an issue for it.\n\n## Usage\n\n`navbar` is a function that takes an options object with the fields:\n\n| name | required | default | description |\n| ---- | -------- | ------- | ----------- |\n| `elementList` | true | N/A | An array or array-like object populated with elements to be represented in the nav list. |\n| `makeNavListItem` | true | N/A | A function that takes an element and creates a navigation list item from it. |\n| `target` | false | `document` | A DOM element to listen to for scroll events. |\n| `tagName` | false | `nav` | Define the tag of element for navbar to return. |\n| `debounceTime` | false | `undefined` | After a scroll event, subsequent scroll events will be ignored for `debouceTime` milliseconds. |\n\nThe navbar listens to scroll events, and will add a `navbar-active` class to the\nnav list item which is closest to the top of the window. This is pretty much all\nthat `navbar` does, although I like to think that the interface that it presents\nis nice for defining a `nav` element. Only one element will have this class at\nany given time. If a `debounceTime` is given (recommended), then `navbar` will\nignore further scroll events for that amount of time. Depending on your use case\nthis may enhance performance.\n\n\n## Example\n\nSimilar to the [demo](/demo), except using Browserify rather than just appending\nto the window object:\n\n```javascript\nconst navbar = require('navbar');\n\n// This function is where you define a list element, giving it classes,\n// registering listeners, and appending children as you like. This one couples\n// with demo.css to produce labels that appear when a the list item is hovered\n// over.\nfunction makeNavListItem(element) {\n  const li = document.createElement('li');\n  const label = document.createElement('span');\n  const spot = document.createElement('span');\n\n  // A label should have a nav-label class and contain the same text as the\n  // element.\n  label.className = 'nav-label';\n  label.textContent = element.textContent.trim();\n\n  spot.className = 'nav-spot';\n  spot.textContent = '●';\n\n  li.appendChild(label);\n  li.appendChild(spot);\n\n  // Custom className for our CSS purposes only. navbar will work around\n  // existing classes by appending or removing the navbar-active class.\n  li.className = 'nav-element';\n\n  // I want clicks on nav items to scroll the relevant title into view.\n  li.addEventListener('click', () =\u003e element.scrollIntoView(true));\n\n  // Remember to return the list element at the end!\n  return li;\n}\n\n// Generate a nav list element for every h2 element on the page.\nconst nav = navbar({\n  elementList: document.querySelectorAll('h2'),\n  makeNavListItem,\n  debounceTime: 100\n});\n\n// Finally, append the element to the document. In this demo the navbar is\n// fixed, so I have simply appended to the body.\ndocument.body.appendChild(nav);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqubyte%2Fnavbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqubyte%2Fnavbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqubyte%2Fnavbar/lists"}