Inspiration for Navigation Indicators

Today we’d like to share some style inspiration with you. The topic of this inspirational collection is navigation indicators. Pages, slideshows and other components often need some kind of navigation that tells the user where he is currently. In this collection we want to explore a couple of subtle designs that make navigating fun and interesting. The example that we are using is a vertical slideshow but the styles can be envisioned and adjusted for many other components.

Note that this is for inspiration purposes only; the slideshow is just a dummy and we use a couple of modern techniques that only work in the latest browser versions.

This is our example markup:

<nav class="nav nav--timiro">
	<button class="nav__item" aria-label="Item 1"></button>
	<button class="nav__item nav__item--current" aria-label="Item 2"></button>
	<button class="nav__item" aria-label="Item 3"></button>
	<button class="nav__item" aria-label="Item 4"></button>
	<button class="nav__item" aria-label="Item 5"></button>
	<button class="nav__item" aria-label="Item 6"></button>
	<button class="nav__item" aria-label="Item 7"></button>
	<button class="nav__item" aria-label="Item 8"></button>
</nav>

The general style for all navigations is the following:

.nav {
	position: relative;
	width: 8em;
	margin: 0 0 0 3em;
}

.nav__item {
	line-height: 1;
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	letter-spacing: 0;
	color: currentColor;
	border: 0;
	background: none;
}

.nav__item:focus {
	outline: none;
}

And the style for the specific example is:

/*** Xusni ***/

.nav--xusni .nav__item {
	width: 3em;
	height: 1.25em;
	margin: 0.5em 0;
}

.nav--xusni .nav__item::after {
	content: '';
	position: absolute;
	top: 35%;
	left: 0;
	width: 100%;
	height: 30%;
	background: #3c4a9a;
	transform-origin: 0 0;
	transition: transform 0.5s, background-color 0.5s;
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.nav--xusni .nav__item:not(.nav__item--current):hover::after,
.nav--xusni .nav__item:not(.nav__item--current):focus::after {
	background: #212956;
	transition: background-color 0.3s;
}

.nav--xusni .nav__item--current::after {
	background: #212956;
	transform: scale3d(0.2,1,1);
}

.nav--xusni .nav__item-title {
	margin: 0 0 0 1em;
	opacity: 0;
	display: block;
	transform: translate3d(2em,0,0);
	transition: opacity 0.5s, transform 0.5s;
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.nav--xusni .nav__item--current .nav__item-title {
	opacity: 1;
	transform: translate3d(0,0,0);
	transition-delay: 0.1s;
}

The Xusni style uses the ::after pseudo-element for the little bar. When hovering, the bar gets darker and once clicked, the title appears and the bar shrinks.

We hope you enjoy these styles and find them inspiring!

More Inspiration

Check out some more component inspiration:

• Inspiration for Line Menu Styles
• Some Inspiration for Pricing Tables
• Inspiration for Text Styles and Hover Effects
• Some More Inspiration for Text Input Effects
• Inspiration for Button Styles and Effects
• Inspiration for Inline Anchor Styles
• Inspiration for Article Intro Effects
• Arrow Navigation Styles
• Inspiration for Item Transitions
• Dot Navigation Styles