CSS Showcase · Live Demo

One trigger. Many menu patterns.

Pick a device, then pick a design pattern for that device — compact menu or mega menu on desktop, popover or dialog picker on iPad, bottom sheet or inline list on mobile — driven by container-type.

Featured demo

mobile · sheet
Signed in as jane

mobile design patterns

dropdown-sheet.css
/* Bottom sheet */
.dd-panel {
  position: absolute;
  inset: auto 0 0 0;
  border-radius: 1rem 1rem 0 0;
  animation: sheet-up .25s ease both;
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

CSS features used

  • • Container queries
  • • Positional swaps
  • • Keyframe animations
  • • aspect-ratio frames
  • • Semantic tokens
  • • Smooth transitions