Navigation radialmenuanimated

Radial Radial Menu

Circular navigation menu that expands icons around a center point.

+
📷
📁
✉️

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { RadialRadialMenu } from 'astro-component-kit';
---

<RadialIconMenu>Content</RadialIconMenu>
--- import { RadialRadialMenu } from 'astro-component-kit'; --- <RadialIconMenu>Content</RadialIconMenu>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/RadialRadialMenu.astro and paste the following code:

astro 
---
---
<div class="radial-wrap">
  <div class="toggle">+</div>
  <div class="icons">
    <div style="--i:1">📷</div>
    <div style="--i:2">📁</div>
    <div style="--i:3">✉️</div>
  </div>
</div>
<style>
  .radial-wrap { position: relative; width: 60px; height: 60px; background: #6366f1; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer; }
  .icons div { position: absolute; left: 0; transform-origin: 30px; transition: 0.5s; transition-delay: calc(0.1s * var(--i)); transform: rotate(0deg) translateX(0px); opacity: 0; pointer-events: none; }
  .radial-wrap:hover .icons div { transform: rotate(calc(360deg / 8 * var(--i))) translateX(80px); opacity: 1; pointer-events: auto; }
</style>
--- --- <div class="radial-wrap"> <div class="toggle">+</div> <div class="icons"> <div style="--i:1">📷</div> <div style="--i:2">📁</div> <div style="--i:3">✉️</div> </div> </div> <style> .radial-wrap { position: relative; width: 60px; height: 60px; background: #6366f1; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer; } .icons div { position: absolute; left: 0; transform-origin: 30px; transition: 0.5s; transition-delay: calc(0.1s * var(--i)); transform: rotate(0deg) translateX(0px); opacity: 0; pointer-events: none; } .radial-wrap:hover .icons div { transform: rotate(calc(360deg / 8 * var(--i))) translateX(80px); opacity: 1; pointer-events: auto; } </style>

Quick Info

Category
Navigation
Filename
RadialRadialMenu.astro
Dependencies
None — pure Astro + CSS
Tags
radialmenuanimated