Styling

Ray Menu uses CSS custom properties (variables) for theming, making it easy to customize the appearance.

CSS Variables

Variable	Default	Description
`--ray-menu-bg`	`#ffffff`	Background color
`--ray-menu-bg-hover`	`#f3f4f6`	Hover background
`--ray-menu-text`	`#1f2937`	Text color
`--ray-menu-text-muted`	`#6b7280`	Muted text color
`--ray-menu-border`	`#e5e7eb`	Border color
`--ray-menu-highlight`	`#3b82f6`	Highlight/accent color
`--ray-menu-radius`	`12px`	Border radius
`--ray-menu-shadow`	`0 10px 40px rgba(0,0,0,0.15)`	Box shadow
`--ray-menu-size`	`200px`	Menu diameter
`--ray-menu-item-gap`	`4px`	Gap between items

Basic Theming

ray-menu {
  --ray-menu-bg: #1a1a2e;
  --ray-menu-text: #eaeaea;
  --ray-menu-highlight: #e94560;
  --ray-menu-border: #16213e;
}

Dark Mode

Ray Menu automatically respects prefers-color-scheme:

@media (prefers-color-scheme: dark) {
  ray-menu {
    --ray-menu-bg: #1f2937;
    --ray-menu-text: #f9fafb;
    --ray-menu-border: #374151;
    --ray-menu-bg-hover: #374151;
  }
}

Or use a class-based approach:

.dark ray-menu {
  --ray-menu-bg: #1f2937;
  --ray-menu-text: #f9fafb;
}

React Inline Styles

Pass CSS variables via the style prop:

<RayMenu
  style={
    {
      "--ray-menu-bg": "#1a1a2e",
      "--ray-menu-highlight": "#e94560",
    } as React.CSSProperties
  }
>
  {/* items */}
</RayMenu>

Sizing

Control the menu size:

ray-menu {
  --ray-menu-size: 250px; /* larger menu */
}

Or per-instance:

<ray-menu style="--ray-menu-size: 180px">
  <!-- compact menu -->
</ray-menu>

Custom Icons

Style icon slots:

ray-menu-item [slot="icon"] {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

ray-menu-item:hover [slot="icon"] {
  fill: var(--ray-menu-highlight);
}

Animation

Customize transitions:

ray-menu {
  --ray-menu-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

Bubble Variant

When using variant="bubble", additional CSS variables are available:

Variable	Default	Description
`--ray-bubble-fill`	`rgba(50, 50, 60, 0.7)`	Bubble background
`--ray-bubble-fill-hover`	`rgba(100, 180, 255, 0.5)`	Bubble hover fill
`--ray-bubble-stroke`	`rgba(255, 255, 255, 0.15)`	Bubble border
`--ray-bubble-stroke-hover`	`rgba(100, 180, 255, 0.8)`	Bubble hover border

ray-menu[variant="bubble"] {
  --ray-bubble-fill: rgba(30, 30, 50, 0.8);
  --ray-bubble-fill-hover: rgba(255, 107, 107, 0.5);
  --ray-bubble-stroke-hover: rgba(255, 107, 107, 0.8);
}

Bubble Submenu Styles

When a bubble submenu is open, parent-level bubbles are dimmed and the selected parent is highlighted. These states use data attributes that can be targeted with CSS:

Selector	Description
`.ray-menu-bubble[data-dimmed="true"]`	Dimmed parent bubble (opacity: 0.3)
`.ray-menu-bubble[data-selected="true"]`	Selected parent bubble (highlighted)
`.ray-menu-bubble[data-submenu="true"]`	Submenu child bubble (animated in)
`.ray-menu-connector`	Dashed connector line

The submenu entry animation (ray-bubble-pop) can be customized:

ray-menu .ray-menu-bubble[data-submenu="true"] {
  animation-duration: 300ms;
}

Frosted Glass

The frosted attribute adds a backdrop-blur effect to menu segments. Three modes control which segments get frosted during submenu navigation:

"menu" — frost only the active menu level; previous menu traces remain unfrosted (default when attribute has no value)
"path" — frost the active menu plus previously selected segments when diving into submenus
"all" — frost every segment at every level, regardless of selection state

<ray-menu frosted></ray-menu>
<ray-menu frosted="path"></ray-menu>
<ray-menu frosted="all"></ray-menu>

Customize the blur intensity:

ray-menu {
  --ray-frost-blur: 12px; /* default: 8px */
}

Variable	Default	Description
`--ray-frost-blur`	`8px`	Backdrop blur amount for frosted glass

Animation

The enter/exit animations can be customized with CSS variables:

Variable	Default	Description
`--ray-enter-duration`	`150ms`	Enter animation duration
`--ray-enter-easing`	`cubic-bezier(0.16, 1, 0.3, 1)`	Enter animation easing
`--ray-exit-duration`	`120ms`	Exit animation duration
`--ray-exit-easing`	`ease-in`	Exit animation easing
`--ray-pop-scale`	`0.8`	Scale at animation start/end

ray-menu {
  --ray-enter-duration: 200ms;
  --ray-pop-scale: 0.9; /* subtler scale effect */
}

Examples

Minimal Theme

ray-menu.minimal {
  --ray-menu-bg: transparent;
  --ray-menu-border: transparent;
  --ray-menu-shadow: none;
  --ray-menu-text: #333;
}

Glassmorphism

ray-menu.glass {
  --ray-menu-bg: rgba(255, 255, 255, 0.1);
  --ray-menu-border: rgba(255, 255, 255, 0.2);
  --ray-menu-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

Styling

On this page