Style Gallery.
Layout레시피

List Detail

Compose an explorable list beside its selected detail region.

GitHub에서 원문 보기 ↗새 탭
원문 가이드 ENGLISH

DOM And Source Order

Place list controls before list results. Place detail content after the list in DOM order unless the detail is the primary task entry point.

Scroll Ownership

Name whether the list, the detail region, or the page body owns scrolling. Avoid making both list and detail scroll independently unless the task requires side-by-side comparison.

Accessibility Checklist

  • Source order: Put list controls before list results, then the selected detail, unless the detail is the primary entry point for the task.
  • Focus expectation: Selecting a list item must either keep focus on the selected item with the detail announced by context, or move focus to the detail heading with a documented return path.
  • Scroll expectation: If list and detail scroll independently, name both regions and verify keyboard users can reach and leave each scroll container.
  • Semantic risk: The list, selected state, and detail region need roles, headings, or labels that expose their relationship before split-sidebar layout is applied.
  • Cognitive risk: Users can lose context when selection changes the detail region; preserve selected state, count/position, and clear return behavior.
  • Verification method: Use automated landmark/name checks, manual focus-return and scroll-container review, and user evidence for browse-and-compare task success claims.

Responsive Behavior

At narrow widths, the list and detail regions should stack in a predictable order. Preserve focus return behavior when selecting an item changes the detail region.

Constraints And Change Points

Set a minimum list width and a dominant detail width. Make shell height explicit when scroll ownership is internal to the viewport.

When Not To Use

Do not use this recipe when the detail page is a full navigation destination. Use ordinary page navigation and a content-limiter instead.

IA Navigation

Parent: Layout Recipes. Next: Quality Gates for claim checks, or Layout Pattern Catalog when replacing a primitive.

Layout 전체 ↗