Overflow is a pattern that defines the behavior of content or elements that do not fit within an assigned area.


  • Always use a visual indicator where possible to communicate to the user that more information is available to view. Visual indicators should be in close proximity to the element that contains an overflow.
  • Any content or elements that are hidden with an overflow must be accessible to all users, regardless of ability.
  • Avoid text truncation where possible.
  • If text is truncated, consider the following guide:
    • Provide the expanded content elsewhere on the page.
    • Ensure any uniquely distinguishable information is placed at the beginning of the truncated content.
    • Provide a method to reveal the truncated content that works with touch, mouse and keyboard.
  • Ensure you are able to use and comprehend the page with text-only zoom or browser zoom up to 200% without horizontal scrolling.
  • Test your content in the longest language localisation to ensure text does not overlap or truncate.

Content Guidelines

  • Try to make text, particularly labels and Calls to Action, as short and clear as possible. Refer to the Buttons and Calls to Action section of the Content Style Guide for more detailed information on how to write concise labels.
  • Aim to keep Tooltips brief. Use periods at the end of a Tooltip when it is a complete sentence. See the Tooltips section of the Content Style Guide for guidance on writing concise Tooltips.


Bi-Directional (Bidi) languages refer to languages that are written and read mainly from right-to-left (RTL). In general, Bidi languages require the overall page layout and all elements inside it, including images that depict directionality, to be flipped, although there are exceptions. For more detailed information on bidirectionality, refer to the article on RTL and Bidi in the Globalization section of the Workday Canvas Design Site.

In the example below, Tab order and text in the overflow Menu are mirrored for RTL languages.

Image depicts Tabs order that is mirrored for Hebrew, a language that reads right to left. Text within the Tabs overflow Menu is also mirrored.

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section