Navigation Drawers

The NavigationDrawer component is normally used for a full-page layout. It will combine the Toolbar and Drawer components in a nice way as well as displaying your main content. In addition, when a full-height drawer type is used, it will add a keyboard-only tabbable link that will allow keyboard users to skip the entire navigation process and start looking at the main content.

The NavigationDrawer component is just a simple way to combine a main fixed Toolbar and a Drawer component on the page. It will handle any of the positioning and offsets required for you. It will definitely be less flexible than the Drawer/Toolbar manual combo yourself.

If you saw the Drawer examples before this example, hopefully the NavigationDrawer example will be simple since it is just a wrapper. It exposes props to pass to both the Drawer and Toolbar components.

You can also look at how this entire website was set up by checking the source code here. It might be a bit more helpful to look through on GitHub though.

This example will be almost exactly as the Drawer except it will show how much boilerplate the NavigationDrawer removes for you.

My site uses path params to fetch documentation/examples/SassDoc, you will need to navigate to a different route to actually view the demo. Please click the link below to see this example in action. The code for the example is still available here by clicking the code expander button.

View Demo