---
title: "BRAND Airbnb 2026 · Recipe: category-tabs"
url: https://memocore.ai/memos/6ab67b03af51aac421da88e5
project: "Brand Styles"
tags: "brand-airbnb"
updated_at: "2026-09-25T13:45:39.776Z"
---

# BRAND Airbnb 2026 · Recipe: category-tabs

HEADER
brand: Airbnb; design_date: 2026-09; kind: component; used_in: BRAND Airbnb 2026 · Page: home S1 (header row 1), Page: search-results (hidden in compact header)
evidence: measured on live https://www.airbnb.com/?locale=en&currency=USD 2026-09-25 (desktop 1440x900 and mobile 390x844 @2x) from computed styles and element stylesheet rules unless marked

LOOK
The header center holds four tabs: All, Homes, Experiences, Services. Each is a small glossy 3D-rendered object followed by a label: a desk globe, a little house with a green tree, a red hot-air balloon and a silver service bell. Inactive labels are grey and the active one is near-black. A 3px black bar under the active tab slides and stretches to the next tab on selection. On mobile the tabs become horizontally scrolling pill chips that look physically raised. The selected chip looks pressed in.

STRUCTURE
desktop (>=950px, est break)
- row: centered in the 96px header row, tabs at x 461 / 562 / 700 / 858 at 1440 (gap between tabs ~34px)
- tab: link role=tab, flex row, height 36px, icon then label
- icon: 3D render PNG in a 72x72 box (rendered from im_w=240 source), overflowing the 36px tab (top y 12), visible object ~44-48px; the icon overlaps the label start by ~10px of transparent padding
- label: 14px/18px 500; inactive #6C6C6C, active #222222
- indicator: one shared 3px bar #222222, radius 0, at y 74 (8px under the tab), width set by transform scaleX over a 10px base element (active All: scaleX 6.0 -> 60px wide under the label and icon)
mobile (<744px)
- row of chips below the "Start your search" pill, starts at x 24, gap 8px, scrolls horizontally, bleeding off the right edge
- chip: height 40px, radius 40px, padding 10px 14px, border 0.67px solid rgba(255,255,255,0.5) (selected) or #FFFFFF (others); 3D icon ~28px + label 14px 400 #222222
- two stacked background layers per chip, cross-faded:
  raised (unselected): linear-gradient(175.11deg, #F3F3F3 8.327%, #FFFFFF 53.126%); box-shadow 0 3px 2.5px rgba(0,0,0,0.10), 0 1px 1px rgba(0,0,0,0.15), 0 0.8px 0.4px rgba(0,0,0,0.15), inset 0 1px 1.5px #FFFFFF, inset 0 10px 15px rgba(58,58,58,0.02), inset 0 -1.5px 0.8px rgba(255,255,255,0.6), inset 0 -1.5px 0.75px rgba(0,0,0,0.30)
  pressed (selected): linear-gradient(163.04deg, #FFFFFF 16.985%, #F5F5F5 82.516%); box-shadow 0 1px 0.5px #FFFFFF, 0 -0.5px 1px rgba(0,0,0,0.15), 0 -1.2px 0.5px 1px rgba(0,0,0,0.05), 0 8px 16px rgba(0,0,0,0.05), inset -0.2px -1px 1px #FFFFFF, inset 0.5px 0.7px 2.5px rgba(0,0,0,0.20), inset -1px -3px 8px rgba(0,0,0,0.05), inset 0.5px 2px 4px rgba(0,0,0,0.10), inset 1px 6px 6px 2px rgba(0,0,0,0.10)
  the selected chip sits 2px lower (y 159 vs 157)

KEY PARAMETERS
tab count 4; icon box 72px; tab height 36px; label 14px 500; indicator 3px #222222; gap ~34px
indicator motion: transform 300ms cubic-bezier(0.2,0,0,1), height 300ms cubic-bezier(0.2,0,0,1)
mobile chips: 40px tall, radius 40px, gap 8px, layer crossfade opacity 220ms cubic-bezier(0.1,0.9,0.2,1)

MOTION
- select (desktop): label colour #6C6C6C -> #222222 (instant, est); indicator translates and scales to the new tab, 300ms cubic-bezier(0.2,0,0,1); the new tab's 3D icon plays a short bounce (scale up ~1.1 and settle, spring medium-bounce 574ms) (inf)
- hover (desktop): label -> #222222; icon lifts slightly (translateY -2px, est) with spring fast (inf)
- select (mobile): raised layer opacity 1 -> 0 and pressed layer 0 -> 1, 220ms cubic-bezier(0.1,0.9,0.2,1), chip moves down 2px
- on scroll the desktop tab row fades out as the header turns compact (Recipe search-bar)

STATES
focus-visible: outline 2px solid #222222, outline-offset 4px, radius 8px
active tab: aria-selected true, label #222222, indicator under it
touch: chips have no hover; press feedback is the pressed layer
reduced motion: indicator jumps without animation, no icon bounce (inf)

HOW TO BUILD
Desktop: a flex row of links, each with an img (72px box, transparent 3D render) and a span. One absolutely positioned 10px wide, 3px tall bar per row, moved with translateX and scaleX to the active tab's measured left and width. Mobile: a scroll-snap row of buttons, each with two absolutely positioned background spans (raised and pressed) under the content, and opacity toggled by aria-pressed.

PITFALLS
Use glossy 3D objects, not line icons, or the header loses its 2025+ Airbnb look. Use soft studio renders with a subtle shadow and a few saturated accents. The underline is black and square-ended, not Rausch pink. Inactive labels are #6C6C6C at weight 500, not 400. The mobile chips need both outer and inset shadows; a flat bordered pill looks wrong.

SCREENSHOTS
- see BRAND Airbnb 2026 · Overview files airbnb_2026_home_d1440_top.jpg (desktop tabs, All selected) and airbnb_2026_home_m390_top.jpg (mobile chips, All pressed)