Skip to main content

Drawer

Not in SB​

The drawer is a thoughtfully designed navigation component that displays categories of links in a vertical column, creating an organized and accessible experience when there are many items or multiple levels of hierarchy. Designed with care to keep navigation clear and scannable, drawers inspire confident exploration while maintaining our commitment to intuitive wayfinding.

When to Use​

Use a drawer when your content has more sections than would comfortably fit in the Top bar as tabs, or when you need to accommodate two or more levels of navigation hierarchy. Drawers are perfect for organizing complex navigation structures while keeping the interface clean and user-friendly.

Structure​

The drawer consists of carefully organized elements that work together seamlessly:

  • Drawer container that holds all categories and enables vertical scrolling when needed
  • Destination list items that represent each link within a category, featuring clear and descriptive labels

When an item's label exceeds the maximum width, it is thoughtfully truncated with a tooltip providing the complete text for accessibility and usability.

Guidelines​

  • Use a navigation drawer to organize navigation with multiple groupings or many levels of hierarchy
  • Ensure navigation drawer labels are clear, concise, and meaningful to users
  • When labels exceed the maximum width, they must be truncated with tooltips providing the full text for complete accessibility
  • Organize categories logically to support user understanding and efficient navigation
  • Consider the scrollable nature of the container when planning content hierarchy

Implementation in Figma​

  1. In Figma go to the Assets Panel and search for Drawer
  2. Drag and drop the component into your frame
  3. Rename and resize the drawer component if needed
  4. Choose the variant of the destination items from the Design Panel

Do's and don'ts​

✅ Place drawer on the left side of the viewport

✅ Truncate longer labels to fit on one line

❌ Do not open or place on the right side of viewport

❌ Do not shrink text size to fit a label on a single line

❌ Do not wrap a label over two lines