---
type: Layout Recipe
title: SaaS Settings
description: Compose a fixed side navigation with a constrained settings flow.
screen_type: SaaS settings
primary_user_task: Review and edit account or workspace settings.
spatial_model: Fixed navigation plus constrained primary content.
---
# SaaS Settings

## Recommended Pattern Stack

- [fixed-sidenav-shell](https://style.gallery/library/patterns/viewport-shell/fixed-sidenav-shell/index.md)
- [content-limiter](https://style.gallery/library/patterns/containment/content-limiter/index.md)
- [stack](https://style.gallery/library/patterns/stacking/stack/index.md)

## 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](https://style.gallery/library/patterns/containment/content-limiter/index.md) are enough.

## Related Patterns

- [scroll-body-shell](https://style.gallery/library/patterns/viewport-shell/scroll-body-shell/index.md)
- [supporting-pane](https://style.gallery/library/patterns/split-sidebar/supporting-pane/index.md)

## IA Navigation

Parent: [Layout Recipes](https://style.gallery/materials/v2/pages/recipes/index.md).
Next: [Quality Gates](https://style.gallery/materials/v2/pages/quality/index.md) for claim checks, or [Layout Pattern Catalog](https://style.gallery/materials/v2/pages/CATALOG.md) when replacing a primitive.