---
url: /foundations/layout/breakpoints/compact.md
description: Breakpoints ensure layouts work across a wide range of devices
---

# Breakpoints

Breakpoints ensure layouts work across a wide range of devices

[Overview](overview.md) · **Compact** · [Medium](medium.md) · [Expanded](expanded.md) · [Large & extra-large](large-extra-large.md)

Layouts for compact [breakpoints](overview.md "Breakpoints are opinionated window sizes where a layout changes to match available space, device conventions, and ergonomics (previously window size classes).") are for **screen widths smaller than 600dp.**

![Messaging app at a compact breakpoint.](/assets/e09700b7-mp40sit1-01.DwBDLCXM.webp)

A compact breakpoint focuses on a single view

## Navigation

Use a navigation bar or modal expanded navigation rail.

Place navigation components close to the edge of the screen where they’re easier to reach.

![Navigation bar and FAB are close to the bottom of a mobile app in a compact window.](/assets/bba3524f-mp40u2kw-02.Buecb0mZ.webp)

Place navigation elements near the bottom of a compact window so they’re easy to reach

## Panes

Use a single pane in compact layouts.

![The single pane consumes most of the area in a compact window.](/assets/c3aee2bb-mp40uzbp-03.CMwt6fUX.webp)

1. Single-pane layouts work best for compact breakpoints

## Spacing

Margins are 16dp from the leading and trailing edge of the window.

![The left and right margins of a compact window pane are 16dp.](/assets/0e8a2a8e-mp40vzj4-04.C9Q3f_gh.webp)

In compact layouts, use 16dp margins

## Special considerations

A compact layout will need to transition dynamically to a medium or expanded layout when:

* A foldable device is unfolded
* A mobile device is rotated from portrait to landscape
* A tablet exits split-screen mode
* A product is resized to be larger in multi-window mode
* A free-form window is resized

![2 mobile layouts showing a messaging app with a 1-pane list and an expanded navigation rail.](/assets/df0d317d-mp40wssg-05.KXhBmABJ.webp)

Compact layouts should dynamically transition to larger layouts when a device is unfolded or rotated