Inspiration for Navigation Indicators

Some navigation style ideas for slideshows, pages and other components that require a navigation. Shown on the example of a vertical slideshow.

NavigationIndicators_800x600

View demo Download source

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.

NavigationIndicators_Zahi

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;
}

NavigationIndicators_Xusni

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:

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 12

  1. 2

    Designer needs to be produce innovative designs for websites. Looking around in various blog articles, give the designer new ideas to create better and more professional looking designs .Very interesting,UI design. Keep up the good work.

  2. 8

    Totally agree, the Design of Everyday Things is a terrific book. It was one of the first books on design that I read, in fact. It really inspired me at the time, and still does.

  3. 9

    Hello

    Thanks for the sharing this great article . which is really very awesome… so thanks for the sharing this article..

Follow this discussion

Leave a Comment