Breadcrumb without href or plain text

[PoojMenon]

Hello,

We're making changes to the upgrade process which takes on a wizard style flow. The pages on the upgrade flow consist of 6 steps, where the steps that a particular user encounters can range from 4-6.

We do not want to add a step progress bar as the actual steps the user sees may change based on the selection made by the user and a changing step progress would be confusing. For example, if a user uses a promo code, they won't be asked for their credit card information.

Currently, the H1 title on the page is the actual task the page pertains to, such as Main address, Tax information etc. We want to add context to the page to make sure the user knows that they are still in the upgrade flow. The recommendation was to have a breadcrumb but the guidance on it is Breadcrumbs are listed in order and represent the hierarchy of the page in the product. However, there is no hierarchy here and no parent page to go to, so a link wouldn't make sense.

Instead, inspired by the breadcrumb component, I have used a text label above the H1 header to indicate to the user that this is the upgrade flow. Just concerned about accessibility issues around having Text above an H1. Is this okay to go ahead with? Any guidance on if the BreadcrumbItem with no href is something we can use for this.

Thank you!

[nkrantz]

Hey @PoojMenon, thanks for starting a discussion on this! There are no accessibility concerns that come with placing a Text above an H1, so that would be a fine approach.

Although your upgrade flow doesn't have hierarchy, it does have a starting page (the first page that appears when a user clicks on "Upgrade" on the side nav, which is likely step 1 of the upgrade process). If you'd like to use Breadcrumb, you can either provide that link as the href, or use a Breadcrumb without an href. If you pick the latter option, it will look very similar to your design with Text, but the color of the text will be slightly darker. You’ll just need to decide whether or not you want to provide users with the option of clicking back to the first step of the flow.

Another option is to change the H1 heading to “Upgrade account” on every page and add an H2 below for each step/page title in the flow.

[PoojMenon]

Hi @nkrantz. Thanks for that. We don't really want users to go back to the first step of the process. We have edit links within the overview card on each step to take them to the right step if they want to change anything. So a breadcrumb without href would suit our needs the best I think.

[SiTaggart]

Rounding out link to Office Hours https://www.loom.com/share/8b6a519fd2a344dfb94dc966e59a18e6# (password in slack

We agreed there was no accessibility concerns and a breadcrumb item with no link was a perfect solutionn

[jweintraub]

@PoojMenon We should probably sync on this as well. Console.Zen will automatically create a linkable breadcrumb to the parent page (Upgrade)...the automatic breadcrumb is being built currently. Product teams individually should not be implementing breadcrumbs. I think you, your PM, myself, and Jacob should sync on this case to see how we should handle it. It seems that for wizard flows, there is a desire to disable the link in the breadcrumb. We may be able to consider adding this condition to the breadcrumb but we'll need to figure out how to implement this technically. I'll set up a sync for our teams.

Note to DSYS folks - please be sure to direct any Console breadcrumb discussions to me. No product team in the console should be manually adding breadcrumbs. Thanks!