Arrow Navigation Styles

Some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects.

From our sponsor: Try Mailchimp today.

Today we’d like to share some inspiration for arrow navigation styles with you. There are so many creative ways of showing those little elements that are an essential part of many websites nowadays. You can find them in content slideshows, as part of the page navigation, in image galleries and many more. These indicators are mostly represented as arrows that point to the left and right. There are of course arrows pointing up and down, too. But today we want to focus on the lateral ones and create some interesting hover effects that in some cases enhance the element, or show a preview of the content to come.

These effects are for your inspiration. Please note that they will only work in modern browsers. Also note that we are using the hover element state to show the effect which is not a solution for touch devices.

The images used in the demo are by Joanna Kustra, Idleformat and Andrey Yakovlev & Lili Aleeva.

One of the effects, the Slit effect, is inspired by the cool effect from Jam3’s work navigation.

An example for one of the style is the following:

<nav class="nav-thumbflip">
	<a class="prev" href="/item1">
		<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-5"></svg></span>
		<img src="img/9.png" alt="Previous thumb"/>
	</a>
	<a class="next" href="/item3">
		<span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-5"></svg></span>
		<img src="img/10.png" alt="Next thumb"/>
	</a>
</nav>

The arrows are SVGs which we include using the technique described by Oleg Solomka in his article SVG Icons FTW.

The CSS is the following for this example:

.nav-thumbflip a {
	perspective: 1000px;
}

.nav-thumbflip a.prev {
	perspective-origin: 100% 50%;
}

.nav-thumbflip a.next {
	perspective-origin: 0% 50%;
}

.nav-thumbflip .icon-wrap {
	display: block;
	width: 100px;
	height: 100px;
	background-color: #b1a798;
	transition: background-color 0.3s;
}

.nav-thumbflip svg.icon {
	position: relative;
	top: 50%;
	transition: fill 0.3s;
	transform: translateY(-50%);
	fill: #fff;
}

.nav-thumbflip img {
	position: absolute;
	top: 0;
	transition: transform 0.3s;
	backface-visibility: hidden;
}

.nav-thumbflip a.prev img {
	left: 100%;
	transform: rotateY(90deg);
	transform-origin: 0% 50%;
}

.nav-thumbflip a.next img {
	right: 100%;
	transform: rotateY(-90deg);
	transform-origin: 100% 50%;
}

.nav-thumbflip a:hover .icon-wrap {
	background-color: #fff;
}

.nav-thumbflip a:hover svg.icon {
	fill: #c1b8ab;
}

.nav-thumbflip a:hover img {
	transform: rotateY(0deg);
}

Note that we have some common styles that will center the navigation anchor in the container.

Here are a couple of the styles:

ArrowNavStyles01

ArrowNavStyles02

ArrowNavStyles04

ArrowNavStyles05

We hope you enjoyed these styles and find them inspiring!

Tagged with:

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

Feedback 35

Comments are closed.
  1. ML, Amazing. I don’t know how you keep finding such creative ways to present the routine. I’ve even tried getting high on peppercorns to find out if that is your secret. No luck. Meanwhile, thank you for sharing these great ideas.

  2. Thank you for such a helpful and well documented tutorial!

    I implemented your code on a WordPress site to navigate between next and previous posts. I think the interaction is really nice and much more elegant than what I had before.

    Check it out here if you like: http://christopherhuffer.com/blonde-brunette/

    Thanks again!

    • As always amazing article!!

      Good job Matthew, your integration works well.

      I’m trying to do a similar thing but in an images slider, would you mind share your scripts?

      Cheers

  3. These are nicely done. I wish there were a way to hover on touch devices. It would make my life easier.

  4. you’re really creative.
    you’re amazing.
    you’re GOD.
    you’re Mary Lou .

    I love all your articles. keep it up. you are really inspiring.

  5. Nothing to say. Just Aweeeeeeeeeeeeeeeesome.
    From where did you get these ideas?

  6. If i like to use this on wordpress is there a way to use the featured images as *pictures?

  7. Another great effects, imaginations, innovations and creative. Thank you CSS Goddess Mary Lou!!

  8. Thank you so much Manoela for the inspiration! I cobbled together three of your Playground inspirations: Arrow Navigation Styles, Inspiration for Article Intro Effects, and Page Loading Effects into a single page example. Worked pretty well together with only minimal adjustments needed. It continues to be a work in progress! Thank you again and keep up the great work!

    • That’s really awesome, I love it! Thanks for sharing it 🙂 Cheers, ML

  9. Great article Mary, I specially like the “Double Flip” one…. I have used it in a few designs and wont hesitate to use again!

  10. Yeah! I fell in love! I always liked the look of those minimalistic designs navigating the user through smaller sites with just a “next”-arrow. But beside the nice look it was an issue to me, they hide, what there will be, when clicking on it. This is a very beautyfull solution, keeping the look without losing the eye for the content and orientation.
    Thanks for that wonderfull inspiration!

  11. A great lovely job as always Mary.

    Just a question please, do you think it would be easy and browser-friendly to make it with a dynamic content ? I mean lets take the image hover effect for instance, so each time we need to hover over the arrow, the next image will appear, so I am thinking of it in a dynamic way, do you think it would be a good idea having this with a 4 or 5 images ? and what is the best idea to do it?

    Many thanks.

  12. Really nice,

    I did use them in a project but i added some jQuery to make sure the width of the background fits the dynamically loaded content in the arrows.
    In this example the width is set to 200px.

    Keep these amazing tuts coming ;).

  13. Hey Mary!! How’s going? Hope ok =)

    Look… in the “Double Flip” example, on mobile version, the text on the left one is not showing… Mind to take a quick look on it?

    Cheers =)