Card drawer
A floating nav bar that springs open into a row of cards, each a group of links, revealed by a clip that only repaints.
- enhancer
- navigation
- menu
- cards
- header
- drawer
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Card drawer example
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<nav data-motion="card-drawer" aria-label="Main">
<a href="#" data-logo><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" aria-hidden="true"><circle cx="12" cy="12" r="7"/></svg>Studio</a>
<a href="#" data-cta>Get started</a>
<section><h3>About</h3><a href="#">Company</a><a href="#">Careers</a></section>
<section><h3>Projects</h3><a href="#">Featured</a><a href="#">Case studies</a></section>
<section><h3>Contact</h3><a href="#">Email</a><a href="#">Office hours</a></section>
</nav>import { CardDrawer } from "./motion/react/CardDrawer";
<CardDrawer>Your content</CardDrawer><script setup lang="ts">
import CardDrawer from "./motion/vue/CardDrawer.vue";
</script>
<template>
<CardDrawer>Your content</CardDrawer>
</template>const el = document.querySelector("#title");
el.dataset.motion = "card-drawer";The wrappers: CardDrawer.tsx (React, TypeScript) and CardDrawer.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-menu | Menu | the button's label |
data-motion-tint | 14 | how much accent each card takes, rising card by card |
Accessibility
- The Menu button carries aria-expanded and aria-controls; each card is a section with its own heading and ordinary links, all inside the nav landmark. - Opening moves focus to the first link; Escape or a click outside closes the drawer and puts focus back on the button; picking a link closes it too. Closed, the drawer is inert. - The drawer opens over the page below it (it is positioned, so nothing below moves). - Reduced motion opens and closes it at once. Reduced motion shows every state at once, with no movement, and stops anything that would move on its own. Frame loops and CSS animations pause off screen and in hidden tabs. Only transform, opacity and paint animate, so nothing around it moves.
Size
card-drawer.js is 1.9 KB gzip, with components-kit.js 3.9 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.