Navigation wizard example with equal width steps and flexible width of the last step
Published on January 1, 2018. Edited on July 5, 2020.
The title of this blog post is a little bit monstrous, but I'll try my best to explain it. I had an interesting challenge at work a while ago. My task was to create a navigation wizard in which all steps should have equal width except the last one. The width of the last step should be dependent on the text width. However, the last step width shouldn't exceed other steps width either.
In the end, it was pretty easy to implement with CSS Flexbox. The following demo probably explains this better than a thousand words. This example is not optimized for small mobile screen sizes. It scales, but at some point, it won't fit anymore.
Embedded content: https://codepen.io/teroauralinna/pen/MrmryX
1. First version of the navigation wizard
HTML
Let's start by creating a simple list and links for the wizard steps.
<ul class="wizard">
<li class="wizard__step">
<a href="#1" class="wizard__step-link">
This is the first step
</a>
</li>
<li class="wizard__step">
<a href="#2" class="wizard__step-link">
This is the second step
</a>
</li>
<li class="wizard__step">
<a href="#3" class="wizard__step-link">
This is the third step
</a>
</li>
<li class="wizard__step">
<a href="#4" class="wizard__step-link">
This is the fourth step
</a>
</li>
<li class="wizard__step">
<a href="#5" class="wizard__step-link">
This is the last step with the flexible width
</a>
</li>
</ul>
SCSS
.wizard {
counter-reset: stepNo;
display: flex;
margin: 0;
padding: 0;
}
.wizard__step {
flex: 1 0 0;
list-style: none;
padding: 0 2% 0 0;
position: relative;
&::before {
border-top: 3px solid #333;
content: "";
left: 0;
position: absolute;
right: 0;
top: 25px;
}
&:last-child {
border: 0;
margin: 0;
padding: 0;
&::before {
border: 0 none;
}
}
}
.wizard__step-link {
color: #333;
display: block;
font-size: 1rem;
font-weight: bold;
position: relative;
text-decoration: none;
z-index: 10;
&:before {
background: #333;
color: #fff;
counter-increment: stepNo;
content: counter(stepNo) ".";
display: block;
font-size: 2rem;
height: 50px;
line-height: 50px;
margin-bottom: 12px;
text-align: center;
width: 50px;
}
&:hover,
&:focus {
color: #000;
text-decoration: none;
&:before {
background: #fff;
border: 1px solid #333;
color: #333;
}
}
}
CSS counter feature will be used to generate step numbering. Counter easily keeps step numbers dynamic regardless of how many steps there are.
2. Add flexible width to the last step
Now we have the navigation wizard with equal width steps. We need to change the last step styles slightly to make it flexible based on a text width.
SCSS
.wizard__step {
&:last-child {
flex: 0 0 auto;
}
}
@for $i from 2 through 10 {
.wizard__step:last-child:nth-child(#{$i}) {
max-width: 100% / $i;
}
}
Let me know if you have any thoughts about the implementation or tips on how to improve!
Latest blog posts
October 24, 2019
How to fetch your public photos from Instagram without the API
June 12, 2019
CodePen embeds with Contentful and Angular
March 26, 2019
Global HTTP request and response handling with the Axios interceptor
December 2, 2018
Setting up webpack 4 for a project
November 10, 2018
How to create Material Design like form text fields with floating label and animated underline bar
May 2, 2018
How to build a complete form with Vue.js
April 4, 2018
How to transfer the Angular server-side state to the client-side
March 28, 2018
My web developer career story
Latest CodePens
July 9, 2019
Switch between the dark and light mode via CSS custom properties
June 12, 2019
Javascript URL handling
June 9, 2019
Material Design like form input text fields with CSS only
March 27, 2019
Global HTTP request and response handling with the Axios interceptors
March 23, 2019
Navigation wizard example with equal width steps and flexible width of last step
March 23, 2019
Javascript event delegation example
December 9, 2018
Responsive and animated D3.js bar chart with positive and negative values (TypeScript)
November 11, 2018