Truncated breadcrumbs maximum characters/width #2329
-
|
Do we have any best practices for truncated breadcrumbs when it comes to the maximum character or width in which the truncation should start? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
Hi @samarthpuri! The Truncate component handles it all for you. If you put a maxWidth on the contents of a Breadcrumb item, it will shorten it to fit within that width. There is an example of this on the Breadcrumb docs page: https://paste.twilio.design/components/breadcrumb/#breadcrumb-with-truncation. We don't have exact guidance around how many characters to truncate to, but in the example, the maxWidth is size10. Please let me know if that helps! |
Beta Was this translation helpful? Give feedback.
-
|
Got it! I noticed that we don't truncate SIDs. However, if a SID is in the breadcrumb is it still a good use case to truncate the SID portion in the breadcrumb? |
Beta Was this translation helpful? Give feedback.
-
|
We typically recommend not truncating SIDs because they're commonly copy/pasted or reviewed for accuracy between two different screens. However I think truncating SIDs in the Breadcrumb is fine so long as you aren't expecting the user to use it as a main point of reference. As in, the SID in the breadcrumb shouldn't be pertinent to the user for anything other than understanding where they are in the product. |
Beta Was this translation helpful? Give feedback.
Hi @samarthpuri!
The Truncate component handles it all for you. If you put a maxWidth on the contents of a Breadcrumb item, it will shorten it to fit within that width.
There is an example of this on the Breadcrumb docs page: https://paste.twilio.design/components/breadcrumb/#breadcrumb-with-truncation. We don't have exact guidance around how many characters to truncate to, but in the example, the maxWidth is size10.
Please let me know if that helps!