# menu

Featured UI Elements⚛ TSX Live preview

Hamburger → Close Morph

Three gradient bars that spring into an X with rotation — the classic menu toggle, pure CSS.

5.2k37.4k8.9kOpen

Animations Live preview

Orbiting Ring Menu

Eight nav pills orbit a glowing core on a circular path — counter-rotation keeps labels upright; hover pauses.

30100Open

Floating Action Button with Fan Menu

A glowing FAB that springs open four action items fanning out in an arc, with the main icon rotating.

28800Open

Radial speed-dial floating action button

FAB springs open four glass action buttons in a radial arc; plus icon rotates into an x while open.

36700Open

Hamburger to X morph button

Three gradient bars morph into an X with a springy cubic-bezier when toggled — the classic nav button.

35400Open

Featured Components Live preview

Gooey SVG-filter FAB menu

Action blobs merge and separate like liquid as they fan out — the classic SVG goo (gaussian blur + colormatrix) menu.

42100Open

Radial social share flyout

Share button springs four circular action orbits (X, link, embed, like) outward along a fan path.

31200Open

Glass profile dropdown menu

Avatar button opens a blurred-glass account menu with item rows, a count badge, separator and red sign-out.

35900Open

Circular orbit radial menu

Click the core and six icon satellites rotate into position around it on an invisible ring; core spins as it opens.

37800Open

Smooth FAQ Accordion · Ultra Violet

A FAQ accordion with buttery height animation using the grid-rows trick and rotated chevrons. Rendered in the Ultra Violet palette.

65900Open

Smooth FAQ Accordion · Cyber Lime

A FAQ accordion with buttery height animation using the grid-rows trick and rotated chevrons. Rendered in the Cyber Lime palette.

48400Open

Smooth FAQ Accordion · Sunset Amber

A FAQ accordion with buttery height animation using the grid-rows trick and rotated chevrons. Rendered in the Sunset Amber palette.

17100Open

Smooth FAQ Accordion · Rose Gold

A FAQ accordion with buttery height animation using the grid-rows trick and rotated chevrons. Rendered in the Rose Gold palette.

66700Open

Smooth FAQ Accordion · Ocean Sky

A FAQ accordion with buttery height animation using the grid-rows trick and rotated chevrons. Rendered in the Ocean Sky palette.

33500Open

Smooth FAQ Accordion · Mint Breeze

A FAQ accordion with buttery height animation using the grid-rows trick and rotated chevrons. Rendered in the Mint Breeze palette.

66700Open

Smooth FAQ Accordion · Candy Pink

A FAQ accordion with buttery height animation using the grid-rows trick and rotated chevrons. Rendered in the Candy Pink palette.

57300Open

Smooth FAQ Accordion · Royal Gold

A FAQ accordion with buttery height animation using the grid-rows trick and rotated chevrons. Rendered in the Royal Gold palette.

24100Open

Stagger Dropdown Menu · Candy Pink

An account dropdown whose items cascade in with a staggered rise, closing on outside click. Rendered in the Candy Pink palette.

57600Open

Stagger Dropdown Menu · Royal Gold

An account dropdown whose items cascade in with a staggered rise, closing on outside click. Rendered in the Royal Gold palette.

24400Open

Stagger Dropdown Menu · Crimson Heat

An account dropdown whose items cascade in with a staggered rise, closing on outside click. Rendered in the Crimson Heat palette.

9200Open

Stagger Dropdown Menu · Deep Indigo

An account dropdown whose items cascade in with a staggered rise, closing on outside click. Rendered in the Deep Indigo palette.

40900Open

Stagger Dropdown Menu · Aurora Teal

An account dropdown whose items cascade in with a staggered rise, closing on outside click. Rendered in the Aurora Teal palette.

74700Open

Stagger Dropdown Menu · Mono Pearl

An account dropdown whose items cascade in with a staggered rise, closing on outside click. Rendered in the Mono Pearl palette.

70200Open

Stagger Dropdown Menu · Ultra Violet

An account dropdown whose items cascade in with a staggered rise, closing on outside click. Rendered in the Ultra Violet palette.

83400Open

Stagger Dropdown Menu · Cyber Lime

An account dropdown whose items cascade in with a staggered rise, closing on outside click. Rendered in the Cyber Lime palette.

48700Open

Morph Icon Button · Candy Pink

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Candy Pink palette.

12200Open

Morph Icon Button · Royal Gold

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Royal Gold palette.

57000Open

Morph Icon Button · Crimson Heat

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Crimson Heat palette.

43400Open

Morph Icon Button · Deep Indigo

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Deep Indigo palette.

17900Open

Morph Icon Button · Aurora Teal

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Aurora Teal palette.

51700Open

Morph Icon Button · Mono Pearl

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Mono Pearl palette.

24800Open

Morph Icon Button · Ultra Violet

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Ultra Violet palette.

39600Open

Morph Icon Button · Cyber Lime

A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Cyber Lime palette.

81300Open

Glass Navbar

Frosted-glass sticky navbar with animated active pill and mobile slide-in menu.

Profile Dropdown

Account dropdown with avatar, name, menu items and outside-click close.

Menu Button Three Dots

Three-dot kebab menu button with popover actions.

Glassmorphism Navbar with Active Indicator

Frosted-glass sticky navbar with a sliding active pill, mobile menu and user avatar cluster.

Command-Style Dropdown Menu

Keyboard-navigable dropdown with grouped actions, shortcut hints and arrow-key support.

Account Menu with Signed-In State

User account dropdown showing plan, usage bar, sign-out and theme submenu.

Sidebar Accordion Navigation

Sidebar with collapsible section groups, chevron animation and active child highlighting.

Quick Actions Dropdown

Global quick-action dropdown with search, recents and grouped shortcuts.