Navigation drawer
A navigation drawer displays categories of navigational links in a vertical column that can be scrolled.
Guidelines
A navigation drawer is used to hold navigation with multiple groupings or many levels. Use a navigation drawer when the content has:
- more sections than would fit in the
Top bar
as tabs - two or more levels of navigation hierarchy
Navigation drawer labels should provide clear and concise direction. Note that if the label is longer than the maximum width it will be truncated and should have a tooltip provided.
Don't
- Do not change the height of the individual items.
- Do not change the width of the
Container
. - Do not open or place on the right side of the viewport.
- Do not shrink text size to fit a label on a single line.
- Do not wrap a label over two lines.
Variant
Subtitle
Use a Subtitle
as a divider to separate groups of navigation designations.
Grandparent
When using the Grandparent
grouping items, always use System icon/Arrows/chevron ...
to indicate nested items.
Grandparent
items are allowed an optional leading icon to supplement the label. Use logical icons.
Don't
- Do not repeat the same icon across primary item destinations.
- Do not apply icons to some items and not others.
Parent
When using the Parent
grouping items, always use System icon/Arrows/chevron ...
to indicate nested items.
Child
A Child
can be used with and without a Parent
. It can be orphaned under a Grandparent
.
Interaction
A desktop navigation drawer can be persistent or toggled via the navigation icon in the top bar. Below 839px
the navigation drawer transforms into a collapsed drawer or becomes a hidden drawer. Hidden navigation drawers are accessible via the navigation icon in the Top bar
.