YOUR COMPONENT PLAYGROUND

Find your kind of menu.

18 layouts · 32 palettes · 24 type treatments
Browse saved website templates ↗

Menu style

Quiet rows, two simple panels.

LIVE PREVIEW

Your menu, your way.

Click +, then a category. Hover works on a mouse; tap works on a phone.

See my menu

Colour palette

Typography — fonts & pairings

Company use, created-by and lookalikes are different. Sources checked 16 Oct 2026. In pairings, categories use the first font; details use the second.

Appearance

DarkLight

Corners

SoftSharp

Spacing

RoomyCompact

Custom accent#b65a38

Paste them here when you like the result.

Default type and desktop row spacing match the inspected ChatGPT plus-menu. Library categories, nested layout and dividers are our adaptation, not ChatGPT’s code. Choices are a demo, not cloud-saved references.

REFERENCE

ChatGPT’s compact menu.

ChatGPT’s plus-menuFramed original capture · 4 Oct 2026

Measured live: 14px regular system type, 20px line height, 36px desktop rows, 6px vertical padding. Same declared font stack; its resolved device font can differ between operating systems. Group dividers are your requested addition. Source

Compact rowsSmall padding keeps related actions close.

Regular system typeThe font was inspected, not guessed.

Quiet feedbackA grey row shows where you are.

What is this called?

Nested menu: a category opens a smaller menu. Progressive disclosure: reveal extra choices when needed. UI is what you see and interact with; UX is the whole experience of using it.