diff --git a/UNRELEASED.md b/UNRELEASED.md
index 93495cf7d16..c462e0e10c6 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -24,6 +24,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Updated open styleguide pr to create multiple pull requests to update `polaris-react` across multiple repos ([#1069](https://github.com/Shopify/polaris-react/pull/1069))
 - Updated the pull request creation to retry when it fails ([#1069](https://github.com/Shopify/polaris-react/pull/1069))
 - Exported overlay and layer data attributes for use in consumer components ([#1266](https://github.com/Shopify/polaris-react/pull/1266))
+- Added new `frame-with-nav-max-width` variable and matching `frame-with-nav-when-not-max-width` mixin ([#1311](https://github.com/Shopify/polaris-react/pull/1311))
 
 - Updated `Resizer` to schedule `handleHeightCheck` to run in next animation frame ([#1301](https://github.com/Shopify/polaris-react/pull/1301))
 
diff --git a/src/styles/shared/breakpoints.scss b/src/styles/shared/breakpoints.scss
index 2ca7d340714..ff575f37765 100644
--- a/src/styles/shared/breakpoints.scss
+++ b/src/styles/shared/breakpoints.scss
@@ -1,5 +1,6 @@
 $page-max-width: layout-width(primary, max) + layout-width(secondary, max) +
   layout-width(inner-spacing);
+$frame-with-nav-max-width: layout-width(nav) + $page-max-width;
 
 $stacked-content: em(
   layout-width(primary, min) + layout-width(secondary, min) +
@@ -131,6 +132,12 @@ $nav-min-window: em(layout-width(page-with-nav));
   }
 }
 
+@mixin frame-with-nav-when-not-max-width() {
+  @include breakpoint-before($frame-with-nav-max-width) {
+    @content;
+  }
+}
+
 @mixin page-when-not-max-width() {
   @include breakpoint-before($page-max-width) {
     @content;