Insert Off-Canvas Navigation For A Responsive Website

Native experience with off-canvas

In this article, David Bushell will be walking through a build demo that centers on two topics. The first is responsive design patterns that embrace the viewport and that improve content discoverability beyond the basic hyperlink; in this case, off-canvas navigation. The second is the complexities of implementing such ideas in an accessible and highly performant manner. These are two topics that he believes are at the heart of the Web’s future.


All good things begin with a solid foundation of semantic HTML and widely supported CSS. In theory, this baseline should function as a usable experience for all browsers that visit your website. (It might also be the final experience in less-capable browsers.)
Demo 1
Be sure to view on a mobile or small screen, and take a while to inspect the code. Although David's final design will be significantly different, starting simple is vital; retrofitting accessibility isn’t trivial.
Demo 1 Breakdown
Media queries are based on a viewport width of 45em (that’s content-dependent). Above this breakpoint, the navigation is permanently visible. David Bushell prefers em units because they allow breakpoints to maintain a relationship with text size.


Be the first to write a comment

You must me logged in to write a comment.