BRAND Nike 2026 · Page: category-listing

HEADER brand: Nike; design_date: 2026-09; page_type: category-listing; variants: search results (/w?q=...), collection walls (/w/new-mens-..., sale) example_urls: https://www.nike.com/w/mens-shoes-nik1zy7ok; evidence: measured on that URL (US, English) 2026-09-25 from the browse app emotion styles and computed styles unless marked purpose: let the user narrow a large assortment and open a product skeleton: fluid; left sidebar 240px + product grid; 24 cards server-rendered, more loaded by infinite scroll (the page grows past 100000px); sidebar left overrides: promo bar under the header (60px #F5F5F5, as Overview); the global header hides on scroll and the title bar sticks instead SECTIONS S0 header - as Overview (Recipe nav-mega-menu) + promo bar 60px (not shown on this capture; seen on the product page) S1 title-bar / wall-header - page title and view controls background: white; padding 0 48px 15px; title top at y 175 (79px below the header, including the promo slot) layout: flex row, title left (flex 1), controls right, items aligned to the baseline elements: H1 24px/31.2px Helvetica Now Text Medium 500 #111111 ("Men's Shoes & Sneakers") + count "(738)" in the same style, 0.25em apart; "Hide Filters" text button 16px/24px 400 #111111 with a 24px sliders icon right (padding-right 25px); "Sort By" text button 16px/24px 400 with a 24px chevron down, padding 0 6px, 24px to the left of it motion: when the page scrolls, the bar becomes sticky at top 0 (header-position is--sticky) and the title scales to 0.75 (transform 200ms, origin left center), the count prefix fades out; the 60px global bar slides back over it on scroll up responsive: <960 title 20px/26px, padding 8px 24px 8px 20px, count grey #707072; "Hide Filters" becomes a "Filter" pill button 36px (padding 6px 20px, secondary ring) opening a full-screen filter sheet; Sort moves into that sheet (est) S2 sidebar / left-nav - filters background: white; width 240px; padding 0 0 16px 48px (content 192px); sticky with its own scroll (thin grey scrollbar visible at 256px) top ~120px (est); height ~1500px of content elements, top to bottom: "Pick Up Today" 16px/24px 500 + toggle 42x24 (track #CACACB off, radius 24px, white knob) ; row 48px, bottom border 1px #E5E5E5, 24px space after category list: 20 links (Jordan, Lifestyle, Running, Basketball, Training & Gym, Walking, Soccer, Skateboarding, ACG, Football, Tennis, Golf, Baseball, Boots, Sandals & Slides, Track & Field, Nike By You, Lacrosse, Wrestling ...), 16px/21.6px Text Medium 500 #111111, padding 0 17.6px 10px 0, margin-left 4px (31.6px pitch); selected: underline, cursor default; hover #707072 (est) filter groups (48px below the list): "Gender (1)", "Sale & Offers", "Color", "Size", "Brand", "Width", "Sports", "Best For", "Collections" (est); each group 54px closed: label 16px/24px 500 (body1-strong) with a count "(1)", chevron 24px at right 2px, padding 12px 0; borders 1px #E5E5E5 between groups (first also on top) open group content: padding 0 0 20px; checkbox rows 16px/24px 400 with 20px boxes (est); Color: grid of round color dots 28px (est) with 12px labels; Size: grid of 4px-radius boxes, 3 per row (est) motion: chevron rotates 180 degrees, 250ms cubic-bezier(0.86,0,0.07,1); content visibility toggles (transition visibility 0.15s) hide: "Hide Filters" collapses the sidebar and the grid grows to 4 columns (est) responsive: <960 sidebar removed; categories become a horizontal scroll row under the title (items 16px 500, padding 0 16px 14px, selected with a 2px black underline via ::after); filters in a sheet S3 product-grid - results layout: grid starts at x 300 (sidebar 240 + grid padding-left 40 + card padding 8 = 288 content edge + 12, est), padding-right 48px; 3 columns of 359px cells with 8px side padding -> images 343x343 at x 308 / 667 / 1026 (16px between images); row pitch ~581px (card 546-581px incl. 18px bottom margin, info min-height 185px, 220px with colorway thumbs) elements per card (top to bottom): image: 1:1 square, cut-out product on #F5F5F5 with a faint top-to-bottom grey gradient in the photo, no radius; whole card is one link (overlay z-index 1) colorway thumbnails (when the style has several colorways): a row of 48x48 image thumbs, 4px gaps, 4px below the image, horizontally scrollable with a hidden scrollbar, the last one cut; padding-bottom 12px messaging (optional): 16px/24px Text Medium 500 #D33918 ("Just In", "Coming Soon", "Best Seller", "Sustainable Materials"), margin-top -3px (12px padding above the text block) title: 16px/24px Text Medium 500 #111111, 1-2 lines ("Air Jordan 1 Retro Low OG "Garden"") subtitle: 16px/24px 400 #707072 ("Men's Shoes", "Men's Road Running Shoes") colors count (when no thumbnails): "3 Colors" 16px 400 #707072 (est) price: 16px/24px Text Medium 500 #111111 ("$155"), 4px above (est); sale: current price #111111, then original struck #9E9EA0 400, then "20% off" 500 #007D48 (est) on the next line copy: product names as-is; no descriptions motion: images fade in (opacity 0.28s); hovering a colorway thumbnail swaps the card image (inf); message line slides between states with a 250ms translateY(0 <-> -1.5em) keyframe when the info block changes on hover (animation-16aoq79 / animation-36bued) responsive: <960 2 columns edge to edge (cells 195px at 390, 3px inner padding, 6px between images), info padding 12px 12px 0, texts 14px/20px, thumbnails gap 1px and 34-36px wide; "elevated" promo cards may span 2 columns S4 infinite-scroll loader - more products load as the user nears the end; no pagination, no "load more" button (est) S5 footer - as Overview PAGE COMPONENTS toggle (nds-toggle small): 42x24, radius 24px, off #CACACB, on #111111 (est), knob 20px white with shadow-1 (est) filter pill (mobile): min-height 36px, padding 6px 16px, 14px/1.5 500 text, 24px chevron rotating 180 degrees (250ms cubic-bezier(0.86,0,0.07,1)); active: 1.5px #111111 ring sort dropdown: white panel under the button, options 16px/24px, right aligned to the button (est): Featured, Newest, Price: High-Low, Price: Low-High INTERACTIONS filters apply instantly on click (URL and grid update, count updates); no apply button on desktop (est) sticky title bar with scale 0.75 on scroll; header peekaboo as Overview sidebar scrolls independently STATES loading: card images #F5F5F5 with opacity 0 until loaded empty results: not measured, est centered 24px title "We couldn't find anything for ..." with body text and suggested links out of stock: not shown on listings (sold-out products drop out) SCREENSHOTS - file: nike_2026_category-listing_d1440_top.jpg shows: first screen at 1440x900, live https://www.nike.com/w/mens-shoes-nik1zy7ok 2026-09-25: title "Men's Shoes & Sneakers (738)" 24px, Hide Filters / Sort By, Pick Up Today toggle, category list, 3-column grid with badges in #D33918 and a colorway thumbnail row do not copy: product photos; use #F5F5F5 placeholders - file: nike_2026_category-listing_d1440_scrolled.jpg shows: scrolled state: global header hidden, sticky title bar scaled to 0.75, filter groups with chevrons and #E5E5E5 dividers, cards with 48px colorway thumbs - file: nike_2026_category-listing_m390_top.jpg shows: mobile first screen at 390: 60px header, title 20px, horizontal category row, 2-column edge-to-edge grid with 14px texts note: no full-page capture (infinite scroll makes the page over 100000px tall)