How would you go about creating these 'Steppers' ? CSS, custom SVGs?, Images?

Wappler General
1

Hey All,

I want to create a couple of ‘Steppers’ like the picture below. In many ways they act just like the bootstrap nav-tabs. I’m really concerned about how to recreate the styling of this with the ‘arrow shape’

That’s what i’m a bit stuck on…don’t even know if it has a shape name :slight_smile:

image
image1441×811 46.5 KB

Currently i’m thinking of creating some shapes as an SVG and loading them as a background image for that section… but not sure how that will scale horizontally.

Maybe some custom CSS could achieve it?

Or perhaps some HTML/JS drawn SVG’s

Any thoughts or directions to point me in? I’m not looking for hand-holding…just a direction :slight_smile:

Cheers,
Phil

2

They could also possibly considered Breadcrumbs from a base Bootstrap perspective instead of Nav-tabs…

But clicking on each one does essentially hide one tab/card and make another one visible in its place

3
4

You could add Tabs as shown here

5

Perfect @GlobaticoLabs. This is what i was after. Perhaps ‘Wizard’ is the better search method. I’ll look into the coding of that now.

@Ben Thanks, your method could also work…i notice you’ve now got a fancy voice over actor working for you :wink:

2 Likes