🌀 CircularMenuCompose

🚀 CircularMenuCompose is a beautiful and interactive Jetpack Compose library for creating elegant circular menus with smooth animations.

---

✨ Features

• 🎨 Customizable UI – Easily modify colors to match your app’s theme.

• ⚡ Smooth Animations – Expand, rotate, and select menu items with seamless transitions.

• 🔄 Dynamic Menu – Clean, intuitive design with menu items arranged in a circular fashion.

• 🎯 State Management – Seamless handling of menu selection and expansion.

• ✅ Lightweight & Fast – Optimized for performance and smooth user experience.

• 🔧 Easy to Use – Simple setup with minimal configuration required.

---

📸 Preview

---

🛠 Usage

Step 1: Create a Menu State

val circularMenus =listOf(
CircularMenuItem(
title ="Home",
icon =CircularMenuIcon.Vector(image =Icons.Default.Home)
),
CircularMenuItem(
title ="AccountCircle",
icon =CircularMenuIcon.Vector(image =Icons.Default.AccountCircle)
),
CircularMenuItem(
title ="Favorite",
icon =CircularMenuIcon.Vector(image =Icons.Default.Favorite)
),
CircularMenuItem(
title ="Build",
icon =CircularMenuIcon.Vector(image =Icons.Default.Build)
),
CircularMenuItem(
title ="Delete",
icon =CircularMenuIcon.Vector(image =Icons.Default.Delete)
)
)
val state = rememberCircularMenuState(
menus = circularMenus,
colors =CircularMenuDefaults.colors(
selectedIconColor =Color(0xFFFFFFFF),
unselectedIconColor =Color(0xFFD97069),
controllerButtonContainerColor =Color(0xFFE31F11),
controllerButtonIconColor =Color(0xFFF5F5F5),
overlayContainerBorderColor =Color(0xFF4A4A4A).copy(alpha =0.4f)
),
brushes =CircularMenuDefaults.brushes(
overlayContainerBrush =Brush.radialGradient(
listOf(
Color(0xFFFF5722),
Color(0xFF9D2920)
)
),
indicatorBrush =Brush.linearGradient(
listOf(
Color(0xFFD7382E),
Color(0xFFE88D87)
)
),
)
)

Step 2: Implement the Circular Menu

CircularMenu(
state = state,
onMenuSelected = { index ->println("Selected item: $index")
}
)

---

🎨 Customization

You can change the colors and brushes to fit your design:

colors =CircularMenuDefaults.colors(
selectedIconColor =Color(0xFFFFFFFF),
unselectedIconColor =Color(0xFFD97069),
controllerButtonContainerColor =Color(0xFFE31F11),
controllerButtonIconColor =Color(0xFFF5F5F5),
overlayContainerBorderColor =Color(0xFF4A4A4A).copy(alpha =0.4f)
)

brushes =CircularMenuDefaults.brushes(
overlayContainerBrush =Brush.radialGradient(
listOf(
Color(0xFFFF5722),
Color(0xFF9D2920)
)
),
indicatorBrush =Brush.linearGradient(
listOf(
Color(0xFFD7382E),
Color(0xFFE88D87)
)
)
)

📦 Installation

Clone this repository:

git clone https://github.com/CoderBDK/CircularMenuCompose.git

License

This project is licensed under the MIT License. See the LICENSE file for details.