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.

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:

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 12

Comments are closed.
  1. 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. 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. Hello

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

  4. Hello,

    Thanks for the sharing this article which is very important for me..as a learning purpose