UI Skillbook
2

Icon Morphs

A menu button whose bars morph into an X while its navigation panel is open.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-icon-morphs and follow the Siteplane Icon Morphs skill it prints for this task.

Paste this into your agent.

Icon Morphs provides the hamburger toggle for mobile and compact navigation. It owns its expanded state attribute and label, and pairs well with a Collapsible panel.

Install

bashnpx shadcn@4.18.0 add @siteplane/icon-morphs

Import it from @/siteplane/components/icon-morphs. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Toggle: Pick Toggle for an on/off control that does not open navigation.
  • vs Theme Toggles: Pick Theme Toggles for a light and dark switch.

Rules

  • Use MenuIconMorph with open and onOpenChange, or defaultOpen for local state.
  • Point aria-controls at the navigation element it shows and hides.
  • Keep the built-in open and close labels or pass your own aria-label.
  • Feed the same open value to a Collapsible that holds the navigation so both move together.
  • Use onClick with preventDefault() only when you must cancel the toggle.

Reference

  • Icon Morphs docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Animated. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-icon-morphs

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Siteplane Dashboard Shellby UI Skillbook

A responsive app frame that combines the sidebar, a sticky top bar and a scrolling content area.

Siteplane UI

Siteplane Sidebarby UI Skillbook

Application navigation in a side column that collapses to an icon rail on desktop and becomes a sheet on mobile.

Siteplane UI

12 Principles of Animationby raphaelsalaja

Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.

MotionExternalGitHub stars: 42

60fps Animationby iart-ai

Web animation performance guidance for avoiding layout thrashing and reaching smooth 60/120fps motion with compositor-friendly techniques.

MotionExternalGitHub stars: 64

Back to Siteplane UI