NavMenu

Circle Navigation Menu is a modern, interactive navigation component built using pure HTML and CSS. It features a compact trigger button that expands into a circular menu, revealing navigation links arranged around the center. With smooth transitions and a clean radial layout, it delivers an engaging user experience while saving screen space. Ideal for portfolios and creative interfaces, this menu adds a premium, futuristic touch without relying on JavaScript.

Live Interactive Preview
🐱
🍪
🐦
🪰
💎
🍻
Source
npx futureuikit add menu
Details

Opens a circular navigation layout from a single central button.Displays menu items arranged around the center for quick access.Provides an interactive and visually engaging navigation experience.Uses smooth CSS transitions for opening and closing animations.Ideal for portfolios, landing pages, and creative interfaces.Built with pure HTML and CSS, making it lightweight and easy to customize.

How to Use?
  • Add the circular nav menu markup where your site navigation should appear.
  • Place it inside a wrapper that controls positioning and layering on the page.
  • Use the main button as the trigger to open and close the circular menu.
  • Show the menu when users need quick access to primary navigation links.
  • Use it on landing pages, portfolios, or sections with limited space.
  • Keep it centered or anchored for a balanced and intuitive layout.
  • Adjust sizes, spacing, and colors in CSS to match your design system.