{"id":21240637,"url":"https://github.com/chrisnajman/set-current-page-menu-item","last_synced_at":"2026-02-23T19:36:44.058Z","repository":{"id":207564043,"uuid":"719206740","full_name":"chrisnajman/set-current-page-menu-item","owner":"chrisnajman","description":"Dynamically highlight the primary menu link for the current page using the 'aria-current' attribute.","archived":false,"fork":false,"pushed_at":"2024-01-15T11:17:56.000Z","size":22,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-15T03:43:33.957Z","etag":null,"topics":["aria-attributes","css-nesting","es6-modules","html-css-javascript"],"latest_commit_sha":null,"homepage":"https://chrisnajman.github.io/set-current-page-menu-item/","language":"HTML","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/chrisnajman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2023-11-15T17:21:33.000Z","updated_at":"2023-11-16T16:40:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"89684db9-51df-4523-b604-81240ab89c95","html_url":"https://github.com/chrisnajman/set-current-page-menu-item","commit_stats":null,"previous_names":["chrisnajman/set-current-page-menu-item"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chrisnajman/set-current-page-menu-item","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Fset-current-page-menu-item","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Fset-current-page-menu-item/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Fset-current-page-menu-item/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Fset-current-page-menu-item/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisnajman","download_url":"https://codeload.github.com/chrisnajman/set-current-page-menu-item/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Fset-current-page-menu-item/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29752810,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T19:23:13.917Z","status":"ssl_error","status_checked_at":"2026-02-23T19:23:11.618Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["aria-attributes","css-nesting","es6-modules","html-css-javascript"],"created_at":"2024-11-21T00:52:14.174Z","updated_at":"2026-02-23T19:36:44.033Z","avatar_url":"https://github.com/chrisnajman.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Set Current Page Menu Item\n\n## Description\n\nGo to any page and the primary menu link for that page will be highlighted. You can add as many links as required. There is nothing hardcoded on the link itself.\n\n### How it works\n\n#### JavaScript\n\nThe JavaScript function checks to see if the `link.href` matches the `location.href`. If it does, the attribute `aria-current=\"page\"` is set on the link. To cover the situation when the `location.href` is only `/` a further check is made:\n\n```JavaScript\nif (\n      link.href.split(\"/\").pop() === \"index.html\" \u0026\u0026\n      location.href.split(\"/\").pop() === \"\"\n    )\n```\n\nIf this is true, the attribute is set on the 'Home' link.\n\n##### Notes\n\n- The 'Home' page file name is `index.html`. If you decide to change it (e.g. `home.html`) you will have to update the reference to it in the JavaScript.\n- The function is placed in a module and imported and called (`document.body.onload = setCurrentPageMenuItem()`) in `index.js`.\n- **Important**: the function only works on a flat, top-level menu. It doesn't work if there are sub-folders containing an `index.html` page.\n\n#### CSS\n\nThe `aria-current=\"page\"` attribute is referenced in `primary-navigation.css`:\n\n```CSS\n\u0026[aria-current=\"page\"],\n\u0026[aria-current=\"page\"]:hover {\n    text-decoration: none;\n    cursor: default;\n    border-bottom-color: var(--link);\n    font-weight: 600;\n}\n```\n\n##### Note\n\n- CSS Nesting is used in this project.\n\n## Accessibility\n\nDynamically adding the `aria-current=\"page\"` attribute to the link kills two birds with one stone:\n\n- accessibility is enhanced and\n- the attribute is used as a styling hook.\n\n## Testing\n\n- Windows 10\n  - Chrome\n  - Firefox\n  - Microsoft Edge\n\nThe page has been tested in both browser and device views.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisnajman%2Fset-current-page-menu-item","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisnajman%2Fset-current-page-menu-item","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisnajman%2Fset-current-page-menu-item/lists"}