Dot Navigation Styles

Today we'd like to share some subtle effects and styles for simple dot navigation with you. These styles could, for example, be used for a page scroll navigation or a thumbnail preview, in a vertical or horizontal fashion.

Small UI elements usually don’t get too much attention when it comes to creative effects. They are often neglected because of their size. But they can offer a great opportunity to add some subtle, yet interesting effects. Recently, you might have seen some kind of dot navigation with a vertical or horizontal layout for scrolling a website to a section. Today we want to share a set of inspirational dot navigation styles with very subtle effects when we hover or when we click on them. For the effects we employ several techniques, including transitions on pseudo-elements, perspective and SVG.

Note that some effects might not work as intended in some browsers (SVG transition, 3D transform-style). For older browsers you might have to add a simple fallback for the selected dot in some examples.

For the structure we’ll have an unordered list with links:

<div class="dotstyle dotstyle-fillup">
		<li class="current"><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Products</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>

For some examples, we also use an additional empty list element, i.e. in order to “move” the current item in the “dot move” style.

We define some common styles:

.dotstyle ul {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
	cursor: default;

.dotstyle li {
	position: relative;
	display: block;
	float: left;
	margin: 0 16px;
	width: 16px;
	height: 16px;
	cursor: pointer;

.dotstyle li a {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	outline: none;
	border-radius: 50%;
	background-color: #fff;
	background-color: rgba(255,255,255,0.3);
	text-indent: -999em;
	cursor: pointer; /* make the text accessible to screen readers */
	position: absolute;

An example for a style and subtle effect is the following one, where we “fill” the inner circle. We do that by setting the link to overflow hidden and using a pseudo-element as the filling part:

/* Fill up */
.dotstyle-fillup li a {
	overflow: hidden;
	background-color: rgba(0,0,0,0);
	box-shadow: inset 0 0 0 2px rgba(255,255,255,1);
	transition: background 0.3s;

.dotstyle-fillup li a::after {
	content: '';
	position: absolute;
	bottom: 0;
	height: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	box-shadow: 0 0 1px #fff;
	transition: height 0.3s;

.dotstyle-fillup li a:hover,
.dotstyle-fillup li a:focus {
	background-color: rgba(0,0,0,0.2);

.dotstyle-fillup li.current a::after {
	height: 100%;

Another interesting example is the stroke that we draw using SVG and transitioning the stroke-dashoffset of the circle shape:

/* SVG draw circle stroke */	
.dotstyle-drawcircle li {
	width: 18px;
	height: 18px;

.dotstyle-drawcircle li a {
	top: 3px;
	left: 3px;
	width: 12px;
	height: 12px;
	background-color: #c44d48;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;

.dotstyle-drawcircle li svg {
	z-index: 10;

.dotstyle-drawcircle li svg circle {
	opacity: 0;
	fill: none;
	stroke: #fff;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 39 39; 
	stroke-dashoffset: 39; /* ~ length of circle path (pi*2r) */
	transition: stroke-dashoffset 0.3s, opacity 0.3s;

.dotstyle-drawcircle li.current a,
.dotstyle-drawcircle li a:hover,
.dotstyle-drawcircle li a:focus {
	opacity: 0.5;

.dotstyle-drawcircle li.current svg circle {
    opacity: 1;
    stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.3s, opacity 0.15s;

For the “hop” effect we also use an extra bit of JavaScript in order to add another class to the current item which indicates if the previous current item was on the right. This will allow us to change the transform origin and let the “hop” happen from the right.

Hope you enjoy these styles and find them inspiring!

Tagged with:

Mary Lou

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.

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

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 40

Comments are closed.
  1. This is one of the best effect i have ever seen 🙂 just loved it, gonna use it on a project. Thanks Mary love you

  2. You are a genius and I wish in this world could exist more women (but also person) like you!

  3. Nice effect, i’ve tried to put link on the href but i don’t know why it doesn’t works

    • Same problem, I’ve tried everything i know but nothing. How can this be fixed?

    • Sorry. Ignore. Got it fixed. 😀
      I used PageScroll2id.js
      Just be sure to amend this code:


      /* Page Scroll to id fn call */
      $("#nav a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({
      highlightSelector:"#nav a"

      /* demo functions */
      var to=$(this).parent().parent("section").next().attr("id");


      follows your nav class structure 🙂

  4. Love the looks, but hate dot navigation style, the touch / click target is way too small to be user friendly.