Circular Navigation Using CSS & Javascript

Introduction to Circular Navigation using CSS & JavaScript

Circular navigation menus are an interactive and visually appealing way to organize links in a radial structure. They work well for mobile apps, dashboards, and modern web applications.

Why Use Circular Menus?

✅ Enhances User Experience – Provides a unique and interactive way to navigate.
✅ Saves Space – Useful for small-screen devices.
✅ Attractive Design – Looks more engaging compared to traditional menus.

Understanding the Concept Behind Circular Navigation

Circular navigation works by placing menu items evenly around a center point using CSS transforms.

Key Concepts Used:

Transformations (rotate(), translateX()) – Positions elements in a circular layout.
Scaling (scale()) – Expands or collapses menu items when activated.
Click Events (toggleClass) – Adds interactivity to the menu.

Setting Up the Basic HTML Structure

We start with a simple HTML structure that includes:

A central toggle button
Eight navigation items

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Circular Navigation using CSS & JS</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<ul class="menu">
		<div class="toggle"><ion-icon name="add-outline"></ion-icon></div>
		<li style="--i:0;"><a href="#"><ion-icon name="home-outline"></ion-icon></a></li>
		<li style="--i:1"><a href="#"><ion-icon name="person-outline"></ion-icon></a></li>
		<li style="--i:2;"><a href="#"><ion-icon name="settings-outline"></ion-icon></a></li>
		<li style="--i:3;"><a href="#"><ion-icon name="mail-outline"></ion-icon></a></li>
		<li style="--i:4;"><a href="#"><ion-icon name="videocam-outline"></ion-icon></a></li>
		<li style="--i:5;"><a href="#"><ion-icon name="key-outline"></ion-icon></a></li>
		<li style="--i:6;"><a href="#"><ion-icon name="game-controller-outline"></ion-icon></a></li>
		<li style="--i:7;"><a href="#"><ion-icon name="camera-outline"></ion-icon></a></li>
	</ul>
	<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
	<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
	<script src="script.js"></script>
</body>
</html>

The <ul> container holds all navigation items.
Each <li> represents a menu item.
A toggle button expands/collapses the menu.

Styling the Circular Navigation with CSS

We use CSS transform properties to position menu items evenly around a circle.

CSS Code

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body 
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222327;
}
.menu 
{
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu .toggle 
{
  position: absolute;
  width: 55px;
  height: 55px;
  color: #0f0;
  border: 2px solid #0f0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  cursor: pointer;
  transition: 0.5s;
}
.menu .toggle.active 
{
  transform: rotate(315deg);
  background: #0f0;
  color: #222327;
}
.menu li 
{
  position: absolute;
  left: 10px;
  list-style: none;
  transform-origin: 140px;
  border: 2px solid #0f0;
  border-radius: 50%;
  transform: rotate(calc(360deg / 8 * var(--i))) translateX(40px);
  scale: 0;
  transition: 0.5s;
  transition-delay: calc(0.1s * var(--i));
}
.menu.active li 
{
  scale: 1;
}

Key Features of This Styling:

Menu items are positioned in a circle using rotate() and translateX().
Clicking the toggle button scales the menu items in/out.

Adding JavaScript for Toggle Effects

We use JavaScript to activate the circular menu on click.

JavaScript Code

let menuToggle = document.querySelector('.toggle');
let menu = document.querySelector('.menu');
let list = document.querySelectorAll('li');

menuToggle.onclick = () => {
	menu.classList.toggle('active');
	menuToggle.classList.toggle('active');
}

list.forEach(item => item.addEventListener('click', function(){
	list.forEach(i => i.classList.remove('active'));
	this.classList.add('active');
}));

FAQs on Circular Navigation using CSS & JavaScript

How to make circular navigation smoother?

Use transition: 0.5s ease-in-out; for better animations.

Can I use circular navigation on mobile?

Yes, use CSS media queries to adjust sizes for small screens.

What are some real-world uses of circular navigation?

Game menus 🎮
Mobile navigation apps 📱
Dashboard controls 🖥

Conclusion

Circular Navigation using CSS & JavaScript is a modern and interactive UI feature that enhances user engagement. By using transformations, scaling, and animations, you can create beautiful, animated menus for your website. 🚀

Circular Navigation using CSS & Javascript

Table of Contents