What is the correct/best name for the UI component which acts like a breadcrumb trail but also indicates where the user is in a defined series of steps?

You see it all the time, something like:


download bmml source – Wireframes created with Balsamiq Mockups

Where Steps 1 & 2 are complete, Step 3 is the current step, and Steps 4 & 5 are unavailable at the moment.

It's probably on the tip of my tongue but I can't think of a good name for it.

2 Answers 2


Some names could be...

Navigation vs. Indication

Checkout Navigation

If the steps are clickable links I would call it something navigation. For example, in a checkout process I would call it "Checkout Navigation" or "Checkout Step Navigation".

"Progress Bar" vs. "Step Progress Bar"

If you call it a progress bar, you should definitely clarify with the word "step" to avoid confusion. Look at the Google Image search results below:

  • I appreciate your input. "Progress Tracker" sits best with me, but it definitely isn't an industry standard term. Dang, I really would have thought it would have had a clear and succinct name, it's such a common design paradigm. Jul 30, 2013 at 2:21
  • 3
    There aren't always clear and succinct names for UI elements. What is more important is that your own team has a shared name for it.
    – DA01
    Jul 30, 2013 at 2:25

It is called a Progress Bar or Progress Meter.

image from the Yahoo Design Pattern Library showing a series of steps with the current one appearing more saturated

You can find slightly different implementation of a progress bar on UI Patterns.com

  • 2
    Hmmmmm, it doesn't sit right with me. I think of a progress bar as the animated 'percent complete' you watch (and watch, and watch). I totally agree, it's a "bar" which represents "progress" but I feel like that name is already taken in UI vocabulary. To call this a progress bar would thus be misleading. Jul 29, 2013 at 23:17
  • I agree with you but it is known by the name Progress Bar so far. I have few suggestions that it could be called Progress Steps, Progress Indicator, Progress List or Progress Tabs but none seems to define it any better than the word Progress Bar does. Jul 30, 2013 at 0:02
  • 1
    Not quite sold on this. Progress bar elements are significantly different. Maybe a "Step Progress Bar" or a "Segmented Progress Bar". Even still, you would never have a traditional progress bar that contains links. Jul 30, 2013 at 3:40
  • If you have progress bar under navigation controls, you would always know what sort of progress bar is being talked of. I have given reference of Yahoo Patterns Library to back my point, if you have a reference to back your "Step or Segmented" point, please share that. "Segmented Progress Bar" is also not accurate as several non-clickable progress bar show their completion one segment at a time. Like Profile Completion ones. hindaincentives.squarespace.com/storage/… Jul 30, 2013 at 7:16
  • For almost every alternative name I've suggested, I've pointed to someone in the community referred to it that way. I think the alternatives just communicate a little more clearly. I wouldn't say the Yahoo pattern library is the authority on UI/UX patterns. Jul 31, 2013 at 20:02

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.