SaaS Settings
Compose a fixed side navigation with a constrained settings flow.
GitHub에서 원문 보기 ↗새 탭Recommended Pattern Stack
DOM And Source Order
Place the navigation before the main settings region when it is the first meaningful wayfinding element. Keep each settings section as a semantic section with its own heading.
Scroll Ownership
The main region owns vertical scrolling. The side navigation remains stable. Avoid adding independent scrolling to individual settings groups unless a group has a named overflow responsibility.
Accessibility Expectations
- Focus expectation: Side-navigation links move predictably into the matching settings section, and focus remains visible when the main region scrolls.
- Scroll expectation: The stable navigation must not create a second hidden scroll path; each settings group should rely on the main region unless overflow is declared.
- Cognitive risk: Settings pages mix navigation and editing; use headings, save-state labels, and grouping so users do not lose the current section.
Responsive Behavior
At narrow widths, navigation may become an inline region above the main content. Preserve source order and avoid visually reordering sections ahead of their headings.
Constraints And Change Points
Use a content width token for the settings column and a gutter token for shell spacing. Keep fixed navigation width explicit so the main scroll region has a predictable inline size.
When Not To Use
Do not use this recipe for a short one-page preference form where document flow and a simple content-limiter are enough.
Related Patterns
IA Navigation
Parent: Layout Recipes. Next: Quality Gates for claim checks, or Layout Pattern Catalog when replacing a primitive.