A smart vertical navigation, with round indicators that turn into labelled icons when the user interacts with them.
Our first concept of vertical fixed navigation is one of our most popular resources. This time, we tried to push this concept a little further.
The basic idea behind putting round indicators on the side of a web page, is to give a hint to the user about the number of sections she/he can go through. We think of each dot as a content chapter, with its own title. Usually, users have to hover over a dot to access the title.
In an attempt to simplify this pattern, we decided to transform the dots when the user interacts with them, by scaling them up and showing an icon + label. Users don’t need to select a specific dot/item, but just move to the side, thus showing their willingness to access the navigation.
Creating the structure
Our navigation is an unordered list wrapped in a nav.cd-vertical-nav. A button.cd-nav-trigger is used to open the navigation on small devices. Besides, a section.cd-section has been created for each navigation item.