Circular/Radial Menu Navbar Template

A highly stylized and visually unique navigation component.

This is a highly stylized and experimental navigation pattern. It sacrifices some traditional usability for a very memorable and unique user experience. It's best suited for specific use-cases like portfolios or interactive exhibits where a "wow" factor is desired. This implementation uses a pure CSS approach for the animations.

Screenshot of the magnetic links navbar template

Get Source Code → Preview →

The Circular/Radial Menu

A highly stylized and visually unique navigation component. Instead of a traditional bar, links are hidden by default. Clicking a central "menu" icon causes the navigation links to dramatically fan out in a circle. This is an experimental pattern ideal for creative portfolios, special landing pages, or any site looking to create a memorable "wow" factor.

Circular Reveal Animation — On click, navigation items animate outwards from a central point, arranging themselves in a perfect circle around the main button. This effect is achieved entirely with performant CSS transforms.
Pure CSS Implementation — The core logic for showing, hiding, and positioning the menu items is handled with CSS, using the "checkbox hack" (an invisible checkbox manages the open/closed state). A small amount of JS can enhance it, but is not required for the effect itself.
Icon-Based with Tooltips: The links are represented by clean SVG icons. For accessibility and usability, descriptive tooltips appear on hover to clarify each button's function.
Fixed Positioning: The menu is fixed to a corner of the screen (e.g., bottom-right), keeping it accessible but out of the way of the main content, much like a "FAB" (Floating Action Button).

Coding Best Practices

CSS custom properties (variables) are used for easy theme customization (colors, fonts).
The code is appropriately commented to explain the purpose of each section.

Code

Here's the full code for the navbar template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Circular/Radial Menu</title>
    <style>
        :root {
            --menu-size: 60px; /* The size of the main button */
            --menu-item-size: 50px;
            --menu-radius: 150px; /* How far the items fly out */

--color-background: #f4f4f5;
            --color-primary: #6d28d9;
            --color-primary-light: #8b5cf6;
            --color-surface: #ffffff;
            --color-text-light: #ffffff;
            --color-text-dark: #374151;
            
            --transition-speed: 0.4s;
            --transition-curve: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Bouncy */
        }

body { margin: 0; font-family: sans-serif; background-color: var(--color-background); }
        .content { min-height: 150vh; padding: 2rem; }

/*
        ========================================
        The Main Menu Container
        ========================================
        Fixed to the bottom-right of the screen.
        */
        .radial-menu {
            position: fixed;
            bottom: 2rem; right: 2rem;
            width: var(--menu-size); height: var(--menu-size);
            z-index: 1000;
        }

/* The invisible checkbox that tracks the menu's state (open/closed) */
        #menu-toggle-checkbox {
            display: none;
        }

/*
        ========================================
        The Main Menu Button (The Label)
        ========================================
        This is what the user clicks.
        */
        .menu-toggle-label {
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: var(--color-primary);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: var(--color-text-light);
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transition: transform var(--transition-speed) ease;
            z-index: 2; /* Sits above the menu items */
        }
        .menu-toggle-label:hover { background-color: var(--color-primary-light); }
        
        /* The 'plus' icon and its transition to an 'X' */
        .icon-open, .icon-close { position: absolute; width: 24px; height: 24px; transition: transform 0.3s ease, opacity 0.3s ease; }
        #menu-toggle-checkbox:checked + .menu-toggle-label .icon-open { transform: rotate(45deg); opacity: 0; }
        #menu-toggle-checkbox:checked + .menu-toggle-label .icon-close { transform: rotate(0); opacity: 1; }
        .icon-close { opacity: 0; transform: rotate(-45deg); }

/*
        ========================================
        The Navigation Links (Menu Items)
        ========================================
        */
        .menu-items { list-style: none; margin: 0; padding: 0; }

.menu-item {
            position: absolute;
            top: 5px; left: 5px; /* Centered with the main button */
            width: var(--menu-item-size); height: var(--menu-item-size);
            
            /* Hidden by default and positioned in the center */
            opacity: 0;
            transform: translate(0, 0) scale(0.5);
            transition: transform var(--transition-speed) var(--transition-curve), 
                        opacity var(--transition-speed) var(--transition-curve);
            pointer-events: none;
            z-index: 1;
        }
        
        .menu-item a {
            display: flex; align-items: center; justify-content: center;
            width: 100%; height: 100%;
            background-color: var(--color-surface);
            color: var(--color-text-dark);
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        .menu-item a:hover { background-color: #f9fafb; }
        .menu-item svg { width: 24px; height: 24px; }
        
        /*
        ========================================
        Open State and Circular Positioning
        ========================================
        When the checkbox is checked, this block becomes active.
        */
        #menu-toggle-checkbox:checked ~ .menu-items .menu-item {
            opacity: 1;
            pointer-events: auto; /* Make items clickable */
        }
        
        /*
        ========================================
        The magic happens here
        ========================================
        These angles are for a menu in the bottom-right corner,
        fanning out up and to the left.
        */

/* Item 1: Positioned at 90 degrees */
        #menu-toggle-checkbox:checked ~ .menu-items .menu-item:nth-child(1) {
            transform: translateY(calc(-1 * var(--menu-radius)));
        }
        
        /* Item 2: Positioned at 112.5 degrees */
        #menu-toggle-checkbox:checked ~ .menu-items .menu-item:nth-child(2) {
            transform: translate(calc(-0.383 * var(--menu-radius)), calc(-0.924 * var(--menu-radius)));
        }
        
        /* Item 3: Positioned at 135 degrees */
        #menu-toggle-checkbox:checked ~ .menu-items .menu-item:nth-child(3) {
            transform: translate(calc(-0.707 * var(--menu-radius)), calc(-0.707 * var(--menu-radius)));
        }

/* Item 4: Positioned at 157.5 degrees */
        #menu-toggle-checkbox:checked ~ .menu-items .menu-item:nth-child(4) {
             transform: translate(calc(-0.924 * var(--menu-radius)), calc(-0.383 * var(--menu-radius)));
        }
        
        /* Item 5: Positioned at 180 degrees */
        #menu-toggle-checkbox:checked ~ .menu-items .menu-item:nth-child(5) {
            transform: translateX(calc(-1 * var(--menu-radius)));
        }
    </style>
</head>
<body>

<div class="content">
        <h1>Circular/Radial Menu</h1>
        <p>Click the button in the bottom-right corner to see the menu items fan out.</p>
    </div>

View Output