Throughout our product we have some pages that are generated strings that can, and often are, really long. But, we also have pages with set titles that aren't such as: Deployments, Blueprints, Gateways.

Check this screenshot for reference: screenshot

My colleague removed the titles throughout the product for exactly this reason, stating that having just the breadcrumb would be enough for the user to know what page he is on. I disagree and believe this is bad practice, so I'd like to have the title.

The problem is having such a long string as a title looks really bad, and if it's too long it will have to be truncated which partially defeats the purpose of having a title in the first place.

Here's what the title looks like on default screens, I'd like the solution to be consistent throughout.


Any ideas or best practices here?

  • Do you have to show the current page in the breadcrumb? Can you not just have: home > recipies > bread and then keep the page name itself just as the H1 on the page itself?
    – JonW
    Mar 13, 2017 at 14:51
  • 1
    Is that page title meaningful to the user? I mean would they be able to differentiate between alsafnalkenf-alkakfnlaw-a0is09ua89d-2 and alsafnalkenf-alkakfnlaw-a0is09ua89d-3? Apr 12, 2017 at 23:07

4 Answers 4


I would have the title be of a fixed length, and if it exceeds that length "..." is added to the end.

For example, say the maximum length is 12 characters. "Gateways" would remain the same, but a long string like "bb545jh6b438d8eerbb5exxxx" would become "bb545jh6b438..."

I would then have a tool-tip on the title that displays the full String.


Display title
Let the user define a display title when the new page is generated. The actual title will remain unique (for back-end purposes I guess), but the display title will be used as title to be displayed at the top of a page.
I don't know if this is at all possible, but it's just an idea.

Strip and format string
If all generated string follow the same format, you could strip and format the title in a new way. Like in your example, it kind of looks like the string is made up out of [category]_[title]-[unique_id]. If so, you could strip away the unique_id, perhaps the category, strip away any excess special characters to be replaced by a space and change the first letter to a capital letter.

That's all I can come up with.

  • Nice ideas, but unfortunately not doable in our case! The pages can be generated automatically and there can be a large number of them, so the first suggestion unfortunately won't work. Neither will the second as we're not sure how the string will be made up.
    – Jasper
    Mar 13, 2017 at 15:06

You can trim title by appending 3 dots (...) and keep tooltip on the same which will show the full title on hover.


  • This will not work on mobile... Why not just let it go as long as it has to and just wrap?
    – UXerUIer
    May 12, 2017 at 18:24
  • @Majo0od Yes it should work! Instead of hover you can put click however I personally don't suggest to show breadcrumb in this way. There are some responsive patterns are available too. You can find some inspiration here bradfrost.github.io/this-is-responsive/patterns.html
    – GVJ
    May 15, 2017 at 11:30

You should use Ellipsis for long titles. This can be achieved with CSS, JavaScript or a mix of both.

If you have very long item entries, just add an ellipsis for the item: enter image description here

If the breadcrumb becomes too long, add ellipsis for the breadcrumb section: enter image description here You can decide on a limit when this behaviour starts to appear, after 5 items, after 3 items, etc. In the example the limit is set to 6, although there are 8 items to display.

You can implement so that the ellipsis are clickable. So when the user is pressing on the "..." the breadcrumb gets expanded as: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.