{"id":21231648,"url":"https://github.com/piyalidas10/accessible-navigation-menu","last_synced_at":"2026-04-19T19:01:31.993Z","repository":{"id":120844769,"uuid":"359137537","full_name":"piyalidas10/Accessible-Navigation-Menu","owner":"piyalidas10","description":"Accessible Bootstrap Dropdown Navigation","archived":false,"fork":false,"pushed_at":"2021-04-18T13:03:19.000Z","size":4,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-20T08:33:31.456Z","etag":null,"topics":["accessibility","angular","javascript","menu","menubar","navigation"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/piyalidas10.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2021-04-18T12:31:39.000Z","updated_at":"2022-02-24T03:48:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"0955a8a1-26da-4862-89a5-de68329f9f06","html_url":"https://github.com/piyalidas10/Accessible-Navigation-Menu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/piyalidas10/Accessible-Navigation-Menu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAccessible-Navigation-Menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAccessible-Navigation-Menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAccessible-Navigation-Menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAccessible-Navigation-Menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/piyalidas10","download_url":"https://codeload.github.com/piyalidas10/Accessible-Navigation-Menu/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAccessible-Navigation-Menu/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32018764,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["accessibility","angular","javascript","menu","menubar","navigation"],"created_at":"2024-11-20T23:47:46.956Z","updated_at":"2026-04-19T19:01:31.984Z","avatar_url":"https://github.com/piyalidas10.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Accessible Bootstrap Dropdown Navigation\n==========================\n\n## The Focus\nFocus refers to what element in your application (such as a field, checkbox, button, or link) currently receives input from the keyboard\n\n## The Focusable elements in HTML\n\n1. HTMLAnchorElement/HTMLAreaElement with an href\n2. HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement but not with disabled (IE actually gives you an error if you try), and file uploads have unusual behaviour for security reasons\n3. HTMLIFrameElement (though focusing it doesn't do anything useful). Other embedding elements also, maybe, I haven't tested them all.\n4. Any element with a tabindex\n\n### Note \n1. You can make it focusable by adding a tabindex=0 attribute value to it\n2. If you can't figure out where the focus on your page is as you're tabbing, open the console and type: document.activeElement. This property will return the element that currently has focus.\n\n\n## Here is the HTML code for making accessible navigation menu. I have used bootstrap navigation menu for implementing the accessibility using JavaScript.\n\n```\n\u003cdiv class=\"container\"\u003e\n\n            \u003c!-- Static navbar --\u003e\n            \u003cnav class=\"navbar navbar-expand-md navbar-light bg-light\"\u003e\n                \u003ca class=\"navbar-brand\" href=\"#\"\u003eNavbar\u003c/a\u003e\n                \u003cbutton class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarNavDropdown\" aria-controls=\"navbarNavDropdown\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"\u003e\n                    \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n                \u003c/button\u003e\n                \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarNavDropdown\"\u003e\n                    \u003cul class=\"navbar-nav\"\u003e\n                        \u003cli class=\"nav-item active\"\u003e\n                            \u003ca class=\"nav-link\" href=\"#\"\u003eHome \u003cspan class=\"sr-only\"\u003e(current)\u003c/span\u003e\u003c/a\u003e\n                        \u003c/li\u003e\n                        \u003cli class=\"nav-item\"\u003e\n                            \u003ca class=\"nav-link\" href=\"#\"\u003eFeatures\u003c/a\u003e\n                        \u003c/li\u003e\n                        \u003cli class=\"nav-item dropdown\"\u003e\n                            \u003ca class=\"nav-link dropdown-toggle\" href=\"#\" id=\"priceDropdownMenuLink\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\u003e\n                                Pricing\n                            \u003c/a\u003e\n                            \u003cul class=\"dropdown-menu\" aria-labelledby=\"priceDropdownMenuLink\"\u003e\n                                \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003ePrice Submenu 1\u003c/a\u003e\u003c/li\u003e\n                                \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003ePrice Submenu 2\u003c/a\u003e\u003c/li\u003e\n                            \u003c/ul\u003e   \n                        \u003c/li\u003e\n                        \u003cli class=\"nav-item dropdown\"\u003e\n                            \u003ca class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbarDropdownMenuLink\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\u003e\n                                Dropdown link\n                            \u003c/a\u003e\n                            \u003cul class=\"dropdown-menu\" aria-labelledby=\"navbarDropdownMenuLink\"\u003e\n                                \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n                                \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n                            \u003c/ul\u003e\n                        \u003c/li\u003e\n                    \u003c/ul\u003e\n                \u003c/div\u003e\n            \u003c/nav\u003e\n\n            \u003c!-- Main component for a primary marketing message or call to action --\u003e\n            \u003cdiv class=\"jumbotron\"\u003e\n                \u003ch1\u003eBootstrap 4 multi dropdown navbar\u003c/h1\u003e\n                \u003cp\u003eThis example of bootstrap 4 navigation with \u003ca href=\"#\"\u003emulti dropdown menu\u003c/a\u003e.\u003c/p\u003e\n                \u003cp\u003e\n                    \u003ca class=\"btn btn-lg btn-danger\" href=\"https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-navbar/\" target=\"_blank\" role=\"button\"\u003eLive Demo\u003c/a\u003e\n                    \u003ca class=\"btn btn-lg btn-primary\" href=\"https://github.com/bootstrapthemesco/bootstrap-4-multi-dropdown-navbar\"  target=\"_blank\" role=\"button\"\u003eDownload from Github\u003c/a\u003e\n                    \u003ca class=\"btn btn-lg btn-info\" href=\"https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-hover-navbar/\"  target=\"_blank\" role=\"button\"\u003ehover version\u003c/a\u003e\n                \u003c/p\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n```\n\n### Note\nI have used the visibility: hidden styling instead of display: none. This is important for accessibility, and you can read more in the link above.\n\n## The Hover Event by Mouse\nThis script is used to show dropdown menu on mouse hover\n\n```\nvar menus = document.querySelectorAll('.nav-item');\nconsole.log('menus =\u003e ', menus);\nmenus.forEach(menu =\u003e {\n    menu.addEventListener( 'mouseover', function(e) {\n        this.querySelector('.nav-link').classList.add('show');\n        this.lastElementChild.classList.add('show');\n    });\n    menu.addEventListener( 'mouseout', function(e) {\n        this.querySelector('.nav-link').classList.remove('show');\n        this.lastElementChild.classList.remove('show');\n    });\n\n});\n```\n\n## The Keyboard Focus \nTo move the focus on a page, use TAB to navigate \"forward\" and SHIFT + TAB to navigate \"backward.\" The currently focused element is often indicated by a focus border, and various browsers style their focus rings differently. Implementing a logical tab order is an important part of providing your users with a smooth keyboard navigation experience. \n\nBy default, focus will move as per DOM order. \n\n## All A Href tag Focus using Custom Style\nI am adding one class to give custom focus style by adding focusBorder class.\n\n```\nvar links = document.querySelectorAll('a');\n\n\nlinks.forEach(link =\u003e {\n    link.addEventListener('focus', function(e) {\n        link.classList.add('activeFocus');\n    });\n    link.addEventListener('blur', function(e) {\n        link.classList.remove('activeFocus');\n    });\n\n});\n```\n\n## The Menu Focus using Keyboard\nPress TAB to move from one menu to another\n\n```\nvar navMenus = document.querySelectorAll('.nav-link');\nvar dropdownLinks = document.querySelectorAll('.nav-item.dropdown');\nfunction hideAllDropsdowns() {\n    dropdownLinks.forEach(droplink =\u003e {\n        droplink.querySelector('.dropdown-toggle').classList.remove('show');\n        droplink.querySelector('.dropdown-toggle').setAttribute('aria-expanded', 'false');\n        droplink.lastElementChild.classList.remove('show');\n    });\n}\n\n\nnavMenus.forEach(menu =\u003e {\n    menu.addEventListener('focus', function() {\n        hideAllDropsdowns();\n        this.classList.add('activeFocus');\n        this.classList.add('show');\n        this.parentElement.lastElementChild.classList.add('show');\n        this.setAttribute('aria-expanded', 'true');\n    });\n    if (menu.nextElementSibling) {\n        const subMenu = menu.nextElementSibling;\n        const subMenuLinks = subMenu.querySelectorAll('a');\n        const lastLinkIndex = subMenuLinks.length - 1;\n        const lastLink = subMenuLinks[lastLinkIndex];\n\n\n        lastLink.addEventListener('blur', function() {\n            this.classList.remove('activeFocus');\n            this.parentElement.parentElement.classList.remove('show');\n            this.parentElement.parentElement.parentElement.querySelector('.dropdown-toggle').setAttribute('aria-expanded', 'false');\n        })\n    }\n\n});\n```\n\nhideAllDropdowns function is being used to hide all already opened dropdowns.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Faccessible-navigation-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiyalidas10%2Faccessible-navigation-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Faccessible-navigation-menu/lists"}