Navigation as a separate page
We have a lot of ways to implement website navigation. It can be a simple list of links, some type of dropdown, full-screen navigation and many more. It can work the same for desktop and smaller screens or it can have different behaviour. Sometimes you can achieve this using CSS. Another time it will require JS. When I was rewriting my blog again, I wanted to create navigation as simple as possible. The current blog implementation contains almost no JS at all and I would like to keep it simple.
How to create simple website navigation without JS and complex CSS?
Make it a separate page!
It is certainly not a solution for every website. It’s not a good idea to use this navigation type when a user should not leave the current page before choosing the next one. I don’t see a problem with this for my blog.
Click on the hamburger icon on the top right corner. It will lead you to a separate page with navigation. It contains the entire navigation content and it even provides you with a button to go back.
What are the advantages of this solution?
- It’s straightforward and it’s easy to adjust it to every screen size
- Easy to test
- I have a space to put everything I want here: a lot of content, search, etc.
- I have removed the entire navigation from every page so, in some cases, it can improve the website performance (less code, less rendering, etc.)
- No need for JS or complex CSS solutions
- It’s easy and readable for a user (at least for me)
What are the disadvantages?
- User has to change the current page and it can discard any change made (like a form-data) or distract the user
- This is not a common type of navigation so a user may be confused
Bonus: you may want to exclude the navigation page from search crawlers. It’s just navigation and (maybe) it should not be visible in search. Just add the noindex, nofollow HTML meta tag.
<meta name="robots" content="noindex,nofollow" />What do you think of such a solution?