HyperNav is a CSS only web navigation menu framework, which came about due to the fact that current CSS frameworks, like Bootstrap, do not provide the tools implement a JavaScript-less, infinitely nestable and unopinionated navigation menus. Additionally, collapsible and expandable side navigation menus with icons have long been a known UI concept, but what about nested collapsible and expandable side navigation menus? I first thought about this kind of navigation menu in about 2015, but was not able to find nor figure out a UI solution to this problem. Since then I've had this in the back of my head, but not actively searching for a solution. In the beginning of 2020 I began working on HyperNav, during which I revisited the concept of nested collapsible and expandable side navigation menus. Finally, I was able to produce a solution that just works (not talking about the technical implementation here, but rather the UI and UX experience). I believe that this navigation menu concept can successfully be used in several projects. See an example here.

Key Features of HyperNav

  • CSS only
  • Nestable iconified side navigation menu
  • IE11 Compatible
  • Unopinionated (for example, split or full buttons)
  • Lightweight
  • Responsive
  • Infinitely Nestable
  • CSS variables
  • Modular

Browser Compatibility

  • IE11
  • Chrome
  • Opera
  • Edge
  • Firefox

Testing HyperNav on Safari and iOS browsers would be greatly appreciated. See the HyperNav Complete Demo.