Responsive Mobile Navigation

This is an example application to show how to develop a responsive navbar for an application that is optimized for mobile. Change the size of your viewport to see it in action! The links and icons in the navbar are purely for show.

I attempt to achieve the following:

• Position the navbar near the thumb for mobile devices
• Progressive enhancement – the navbar works without JavaScript and without CSS and does not hide content
• focus and hover states for navigation items

• Style active item and label it for a screen reader

  (Tip from this book : add a description for a screen reader with aria-describedby and use this as a hook for CSS styling)

• Always have a label for every icon!
• Only hide navigation items on mobile when absolutely necessary – the mobile menu is only activated when there are at least five menu items.
• A lightweight implementation – I dare you to check how few KBs this implementation actually has!

I also chose 600px as the breakpoint to determine if something is a phone or a tablet. Read this article to understand why I chose that value.

Any comments or suggestions?

Please feel free to create an issue in this repository .