Material provides some basic styles for a set of components that are normally used in a navigation drawer such as headings and navs.
Add .navdrawer-right
to the navigation drawer to make it stick to the right hand side of the screen.
Navdrawer subheader
Navdrawer subheader
Persistent Drawer
A persistent drawer sits on the same surface elevation as the content so it does not generate a backdrop. Need to add data-type="persistent"
and .navdrawer-persistent
alongwith .navdrawer
.
Navdrawer subheader
Temporary Drawer
A temporary drawer does not generate a backdrop so it can remain open while you perform other actions on the page. Need to add data-type="temporary"
and .navdrawer-temporary
alongwith .navdrawer
.
Navdrawer subheader
Permanent Drawer
A permanent navigation drawer is always visible at the same elevation as the content. Need to add data-type="permanent"
and .navdrawer-permanent
alongwith .navdrawer
.
Clipped Permanent Drawer
A permanent navigation drawer has a few variations of its own, too. It can be clipped under the top navigation bar (.navbar
). Need to add .navdrawer-permanent-clipped
alongwith .navdrawer .navdrawer-permanent
.
Float Permanent Drawer
For pages that require less hierarchy, a floating permanent drawer may be the best fit.
A floating permanent drawer can also work with other components, such as .card
. Need to add .navdrawer-permanent-float
alongwith .navdrawer .navdrawer-permanent
.