Style Gallery.
Layout패턴

내비게이션을 고정한 앱

fixed-sidenav-shell

Keep side navigation stable while main content scrolls.

이 자료로 구현하기

원문 주소와 버전이 포함된 요청문입니다. 복사한 뒤 만들 화면과 요구사항을 채워 에이전트에게 전달하세요.

TRY THE PATTERN

너비가 달라지면 어떻게 될까요?

LIVE PREVIEW
720px

원문의 HTML·CSS로 실행합니다. 색과 테두리는 영역을 구분하기 위한 예시입니다.

FROM PRINCIPLE TO PRACTICE

이 원리로 만든 예제 1

예제를 열어 직접 조작하고, 관찰한 동작을 이 문서의 원리와 비교해 보세요.

원문 가이드 ENGLISH

When To Use

Use this pattern when you need to keep side navigation stable while main content scrolls.

HTML

<section class="fixed_sidenav_shell" aria-label="Settings">
    <nav class="fixed_sidenav_shell_list"><a href="#">Profile</a><a href="#">Billing</a></nav>
    <main class="fixed_sidenav_shell_main">Editable settings form scrolls independently</main>
</section>

CSS

.fixed_sidenav_shell {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    max-block-size: 100dvh;
}

.fixed_sidenav_shell_list {
    min-block-size: 0;
}

.fixed_sidenav_shell_main {
    min-block-size: 0;
    overflow: auto;
}

Core Properties

  • display, grid-template-columns, grid-template-rows, max-block-size, min-block-size, overflow define the spatial behavior for this pattern.

Properties That Break The Layout If Removed

  • Removing display, grid-template-columns, grid-template-rows, max-block-size, min-block-size, overflow changes the pattern from its documented layout responsibility back toward ordinary flow or an unsafe fixed arrangement.

Constraints And Change Points

  • fluid responsiveness is part of the contract; change sizing values only when the new minimum, maximum, or wrap point is documented with the pattern.
  • Keep the HTML class hooks and CSS selectors in one-to-one agreement.

Scroll Ownership

Pattern owns the named scroll container.

Accessibility And Source Order Notes

  • Semantic role expectation: Preserve the HTML sample's landmark, list, navigation, form, figure, or article roles; layout classes must not replace semantic elements.
  • DOM order expectation: Keep semantic elements, DOM order, reading order, and focus order independent from the visual placement created by the layout classes.
  • Focus risk: Any interactive descendants follow DOM order; do not use this pattern to create a visual order that keyboard focus cannot follow.
  • Scroll expectation: Pattern owns the named scroll container.
  • Cognitive risk: Medium: scroll ownership can hide context, controls, or return points if it is not named in the consuming layout.

Browser And Fallback Notes

The CSS uses modern grid, flex, intrinsic sizing, logical properties, or positioning. If a target browser cannot support a property, fall back to ordinary block flow before adding decorative or script-driven layout behavior.

Composition Notes

Use fixed_sidenav_shell as the stable pattern root and compose additional layout behavior outside that root unless the child class is part of the documented relationship.

Anti-patterns

  • Do not add color, border, shadow, typography, or animation rules to reusable pattern CSS.
  • Do not use this pattern to repair unclear HTML structure; make the DOM roles legible first.

IA Navigation

Parent: Viewport / Shell patterns in Pattern Categories. Next: Layout Recipes for screen-level composition, or return to the Layout Pattern Catalog when choosing another primitive.

Layout 전체 ↗