Icon Morphs

Icon morphs work best when both visual states belong to the same control and the state change is immediately understandable. MenuIconMorph provides that behavior without adding a decorative hover surface.

Installation

pnpm dlx shadcn@4.16.1 add @siteplane/icon-morphs

Menu to Close

The hamburger and close icon share one button. aria-expanded mirrors the visual state, while the accessible label describes the action that will happen next.

"use client";

import { useState } from "react";

import { MenuIconMorph } from "@/components/ui/icon-morphs";

export function Example() {
  const [open, setOpen] = useState(false);

  return <MenuIconMorph open={open} onOpenChange={setOpen} />;
}

Integration

Use open and onOpenChange to connect the control to the same state that controls the navigation panel, then add aria-controls with the panel's ID. Omit those props when a self-contained uncontrolled toggle is sufficient. Do not run a separate decorative icon state that can drift away from the real menu state.

Sizing

The control inherits sm, default, lg, or xl from SiteplaneUIProvider. Pass size directly for a local override.

Accessibility

The morph must not be the only state signal. Keep the changing accessible label, aria-expanded and the normal focus-visible treatment on the button.