# ✍️ Side nav

Vertical navigation for primary application modules. Use when the app has many top-level sections or needs to show sub-navigation.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.side-nav.content"
  source="components/dist/registries/dskit.json#side-nav"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"side-nav"} activeTab={"content"} />

## Content guidelines

Permanently anchored (though collapsible) to the left side of all apps in which it is available, for persistent access to primary sections of the product.

### When to use

- For persistent access to primary sections of the product.

### Style

- Clarity: use short, descriptive labels that match the text used in page headers.
- Consistency: keep naming and order consistent across the platform.
- Use plain language and common industry terms.

### Behavior

- Highlight the current section (and its parent if applicable) in the hierarchy.
- The side nav collapses and expands in response to different screen sizes.