BRAND Vercel 2026 · Recipe: dashboard-sidebar

HEADER brand: Vercel; design_date: 2026-10; kind: component; used_in: BRAND Vercel 2026 · Page: dashboard (app shell, every logged-in page) evidence: read from the dashboard chunks (sidebar module 1qlnuwtsjpjww.js, stylesheet 3-qb-ev6vlqj7.css and the Tailwind build 0s2bp-fj0r2zt.css) and computed styles in a logged-in Hobby team on https://vercel.com/<team> 2026-10-05, viewport 2048x926 CSS (browser zoom 75%), unless marked LOOK A quiet light-grey rail on the left of every dashboard page. At the top the team switcher (avatar, team name, "Hobby" plan pill, up/down chevrons), under it a "Find" field with an "F" key hint, then a single column of 36px rows with a 16px line icon and a 14px label: Projects, Deployments, Logs, Analytics, Speed Insights, Observability, Firewall, CDN, then a divider and Environment Variables, Domains, Connect, Integrations, Storage, Flags, Agent and more. Hovering a row fills it with a very light grey; the current page has a slightly darker grey fill and black text. Rows with a chevron open a second-level list that slides in over the main list with a tiny horizontal move, fade and blur, with a back row at the top. The account row (avatar, username, "..." and a bell) sits at the bottom; promotional cards can appear above it. STRUCTURE rail: full height, background #fafafa (page --ds-background-200), separated from the content by a 1px #ebebeb line (est), width var(--sidebar-width) = 256px by default top: team switcher row (height 36px est), Find field 32px tall (est) with a 1px ring and a key badge "F" at the right nav: two stacked panes in one relative box: the main pane (top-level links) and, when a nested section is active, a nested pane placed absolutely over it (inset-x 0, top 0); both have overflow scrolling with 40px fade masks at the top and bottom edges (--sidebar-fade-size 40px) when content is scrolled bottom: account row with avatar 20px (est), username 14px, "..." icon button and a bell icon button optional: promo card (white, radius 6px, ring, 14px heading 500, 12-13px body, full-width 32px primary button, close x) KEY PARAMETERS rail width: 256px default; resizable by dragging its edge between 240px and 400px (stored in localStorage "vc-dash-sidebar-width"); collapsible to 0px (html.sidebar-collapsed, --raw-sidebar-width 0px) item (link): height 36px, width = rail minus 16px (8px side inset), radius 6px, padding-left 2px; icon cell 36x36 with a 16px icon centered; label 14px/20px weight 500; chevron cell 24x24 at the right for nested sections item colors: default text #4d4d4d (gray-900), bg transparent; hover bg #f2f2f2 (gray-100), text #171717; focus-visible bg #f2f2f2 + 2px #0072f5 outline offset 4px; active (current page, data-shell-active) bg #ebebeb (gray-200), text #171717; pressed on the current item bg #e6e6e6 (gray-300); all instant (no transition on rows) nested back row: full-width button, rounded 6px, 36px: back arrow in a 36x36 cell left, title 14px 500 centered, empty 36px cell right; hover bg #f2f2f2, pressed bg #ebebeb, transition-colors 150ms Find field: 14px placeholder "Find" #8f8f8f (est), white bg, ring 1px rgba(0,0,0,0.08), radius 6px, key hint "F" in a 20px white key cap with a ring (est) team switcher: 18-20px team avatar, team name 14px 500 #171717, plan pill "Hobby" 12px #4d4d4d on #ebebeb (est), chevrons-up-down 16px at the right MOTION drill-in (open nested section): main pane -> translateX(-8px), opacity 0, blur(2px), pointer-events none; nested pane from translateX(+8px), opacity 0, blur(2px) -> translateX(0), opacity 1, blur(0); both transition transform, translate, opacity, filter 200ms ease, simultaneously drill-out (back): reverse; the main pane returns from -8px, the nested pane leaves to +8px; when the nested pane's opacity transition ends it is unmounted touch and small screens (<=767px or touch/pen): horizontal swipe on the rail goes back (swipe right) or forward (swipe left) between panes reduced motion: transitions off; the hidden pane is set to visibility hidden instead of fading collapse/expand of the whole rail: width switch 256px <-> 0px (instant, est) Find palette: pressing F (or clicking the field) opens a 384px panel anchored under the field (x 4, y 50 in the rail), white, radius 12px (est), menu shadow; the rest of the page is covered instantly by rgba(255,255,255,0.6); results are 2-line rows (title 14px #171717, context 12px #8f8f8f, est) with a 16px icon, the first row highlighted #f2f2f2 (est), "Esc" hint at the right of the input; typing filters live; Escape closes; a natural-language question becomes a "Navigation Assistant" row team-level sections with a chevron (Logs, Observability...) open a project picker page ("Continue to Logs", choose a project, a 384px search field and a list of projects) instead of a nested pane STATES hover: grey fill, instant; focus and keyboard: Tab through rows, focus-visible fill + blue outline; touch and mobile: the rail becomes an overlay drawer (inf) with swipe-back; reduced motion: as above; loading: the team name and the row labels show grey skeleton bars (rounded 4px, est 72x16) until data loads HOW TO BUILD A fixed-width (256px) left column on #fafafa with a stack of 36px rounded rows; implement nested sections as two absolutely stacked panes that swap with a 200ms ease transition of transform (+-8px), opacity and a 2px blur; keep row hover and active colors instant. Store the width in localStorage and allow 240-400px drag resizing. PITFALLS animating the row background (it is instant); sliding panes too far (only 8px) or without the 2px blur; using blue for the active row (it is grey #ebebeb with black text); bold labels (500, not 600); missing the 8px inset (rows do not touch the rail edges) SCREENSHOTS - file: vercel_2026_dashboard_d2048_projects.jpg (attached to Page: dashboard) rail at rest with Projects active - file: vercel_2026_dashboard_d2048_deployments.jpg (attached to Page: dashboard) project-scope rail with Deployments active and more sections (AI Gateway, Sandboxes, Workflows, Images, Usage)