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

🙈Ops! Can't find the image, but you could still try Figma.

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.