diff --git a/core/includes/menu.inc b/core/includes/menu.inc
index 2afdaa9..f4698d6 100644
--- a/core/includes/menu.inc
+++ b/core/includes/menu.inc
@@ -320,7 +320,6 @@ function template_preprocess_menu_tree(&$variables) {
   if (!isset($variables['attributes']['class'])) {
     $variables['attributes']['class'] = array();
   }
-
   $variables['tree'] = $variables['tree']['#children'];
 }
 
diff --git a/core/lib/Drupal/Core/Extension/ThemeHandler.php b/core/lib/Drupal/Core/Extension/ThemeHandler.php
index 4a5160d..9260f3d 100644
--- a/core/lib/Drupal/Core/Extension/ThemeHandler.php
+++ b/core/lib/Drupal/Core/Extension/ThemeHandler.php
@@ -449,6 +449,8 @@ public function rebuildThemeData() {
         'sidebar_second' => 'Right sidebar',
         'content' => 'Content',
         'header' => 'Header',
+        'primary_menu' => 'Primary menu',
+        'secondary_menu' => 'Secondary menu',
         'footer' => 'Footer',
         'highlighted' => 'Highlighted',
         'help' => 'Help',
diff --git a/core/modules/system/src/Tests/Cache/PageCacheTagsIntegrationTest.php b/core/modules/system/src/Tests/Cache/PageCacheTagsIntegrationTest.php
index cc91286..28ed689 100644
--- a/core/modules/system/src/Tests/Cache/PageCacheTagsIntegrationTest.php
+++ b/core/modules/system/src/Tests/Cache/PageCacheTagsIntegrationTest.php
@@ -90,7 +90,6 @@ function testPageCacheTags() {
       'node:' . $node_1->id(),
       'user:' . $author_1->id(),
       'filter_format:basic_html',
-      'menu:account',
       'menu:tools',
       'menu:footer',
       'menu:main',
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index 31b9232..9b1e9bf 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -157,12 +157,12 @@ function system_theme() {
     // themes. We explicitly define theme suggestions here so that the block
     // templates in core/modules/system/templates are picked up.
     'block__system_branding_block' => array(
-      'render element' => 'elements',
+      'render_element' => 'elements',
       'base hook' => 'block',
       'template' => 'block--system-branding-block',
     ),
     'block__system_menu_block' => array(
-      'render element' => 'elements',
+      'render_element' => 'elements',
       'base hook' => 'block',
       'template' => 'block--system-menu-block',
     ),
@@ -676,7 +676,6 @@ function system_preprocess_block(&$variables) {
     case 'system_help_block':
       $variables['attributes']['role'] = 'complementary';
       break;
-
   }
 }
 
diff --git a/core/modules/system/templates/block--system-menu-block.html.twig b/core/modules/system/templates/block--system-menu-block.html.twig
index 2510883..adc53af 100644
--- a/core/modules/system/templates/block--system-menu-block.html.twig
+++ b/core/modules/system/templates/block--system-menu-block.html.twig
@@ -1,3 +1,4 @@
+{% extends "@block/block.html.twig" %}
 {#
 /**
  * @file
@@ -28,7 +29,7 @@
  * - title_suffix: Additional output populated by modules, intended to be
  *   displayed after the main title tag that appears in the template.
  *
- * Headings should be used on navigation menus that consistently appears on
+ * Headings should be used on navigation menus that consistently appear on
  * multiple pages. When this menu block's label is configured to not be
  * displayed, it is automatically made invisible using the 'visually-hidden' CSS
  * class, which still keeps it visible for screen-readers and assistive
@@ -39,6 +40,7 @@
  *
  * @ingroup themeable
  */
+ @todo Remove the div around content as per http://drupal.org/node/1972122.
 #}
 {%
   set classes = [
@@ -55,16 +57,16 @@
     {% set title_attributes = title_attributes.addClass('visually-hidden') %}
   {% endif %}
   {{ title_prefix }}
-    <h2 id="{{ heading_id }}"{{ title_attributes }}>{{ configuration.label }}</h2>
+  <h2 id="{{ heading_id }}"{{ title_attributes }}>{{ configuration.label }}</h2>
   {{ title_suffix }}
 
   {# Menu. If no label is displayed, don't wrap it in <div class="content">. #}
   {% if configuration.label_display %}
     <div{{ content_attributes.addClass('content') }}>
   {% endif %}
-    {% block content %}
-      {{ content }}
-    {% endblock %}
+  {% block content %}
+     {{ content }}
+  {% endblock %}
   {% if configuration.label_display %}
     </div>
   {% endif %}
diff --git a/core/modules/system/templates/page.html.twig b/core/modules/system/templates/page.html.twig
index 430f860..41d8270 100644
--- a/core/modules/system/templates/page.html.twig
+++ b/core/modules/system/templates/page.html.twig
@@ -47,6 +47,8 @@
  *
  * Regions:
  * - page.header: Items for the header region.
+ * - page.primary_menu: Items for the primary menu region.
+ * - page.secondary_menu: Items for the secondary menu region.
  * - page.highlighted: Items for the highlighted content region.
  * - page.help: Dynamic help text, mostly for admin pages.
  * - page.content: The main content of the current page.
@@ -87,19 +89,13 @@
           <div class="site-slogan">{{ site_slogan }}</div>
         {% endif %}
       </div>{# ./name-and-slogan #}
-   {% endif %}
+    {% endif %}
 
     {{ page.header }}
   </header>
 
-{# @todo Figure out how to replace this.
-  {% if main_menu or secondary_menu %}
-    <nav role="navigation" aria-labelledby="links__system_main_menu">
-      {{ main_menu }}
-      {{ secondary_menu }}
-    </nav>
-  {% endif %}
-#}
+  {{ page.primary_menu }}
+  {{ page.secondary_menu }}
 
   {{ breadcrumb }}
 
diff --git a/core/profiles/standard/config/install/block.block.bartik_account_menu.yml b/core/profiles/standard/config/install/block.block.bartik_account_menu.yml
index 9252f6c..e7c4dea 100644
--- a/core/profiles/standard/config/install/block.block.bartik_account_menu.yml
+++ b/core/profiles/standard/config/install/block.block.bartik_account_menu.yml
@@ -3,7 +3,7 @@ theme: bartik
 weight: 0
 status: true
 langcode: en
-region: header
+region: secondary_menu
 plugin: 'system_menu_block:account'
 settings:
   visibility: { }
diff --git a/core/profiles/standard/config/install/block.block.bartik_main_menu.yml b/core/profiles/standard/config/install/block.block.bartik_main_menu.yml
index 6cf9649..7031406 100644
--- a/core/profiles/standard/config/install/block.block.bartik_main_menu.yml
+++ b/core/profiles/standard/config/install/block.block.bartik_main_menu.yml
@@ -3,7 +3,7 @@ theme: bartik
 weight: 0
 status: true
 langcode: en
-region: header
+region: primary_menu
 plugin: 'system_menu_block:main'
 settings:
   visibility: {}
diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
index 9f514ef..5e73a26 100644
--- a/core/themes/bartik/css/colors.css
+++ b/core/themes/bartik/css/colors.css
@@ -8,8 +8,8 @@ body {
 }
 #page,
 #main-wrapper,
-.menu--main .menu li a.active,
-.menu--main .menu li.active-trail a {
+.menu--primary li a.active,
+.menu--primary li.active-trail a {
   background: #ffffff;
 }
 .tabs ul.primary li a.active {
@@ -53,6 +53,6 @@ a:active,
 .site-branding-block,
 #name-and-slogan a,
 .site-branding-block a,
-.menu--account li a {
+.menu--secondary li a {
   color: #fffeff;
 }
diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css
index 68826b0..06c9433 100644
--- a/core/themes/bartik/css/layout.css
+++ b/core/themes/bartik/css/layout.css
@@ -24,7 +24,15 @@ body,
 #header div.section {
   position: relative;
 }
-#secondary-menu {
+.menu--secondary {
+  float: right; /* LTR */
+  margin: .5em 5px .75em;
+  border: 1px solid #ccc;
+}
+[dir="rtl"] .menu--secondary {
+  float: left;
+}
+.menu--secondary .block-menu {
   width: 100%;
   margin: 0 auto;
   overflow: hidden;
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index 0271cc5..9846895 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -420,12 +420,7 @@ h1.site-name {
   list-style-image: none;
   padding: 0;
 }
-/* Treat menu blocks in the region header as a special case. */
-.region-header .block-menu {
-  float: none;
-  margin: 0;
-  font-size: inherit;
-}
+
 .region-header .form-text {
   background: #fefefe;
   background: rgba(255, 255, 255, 0.7);
@@ -447,6 +442,7 @@ h1.site-name {
 .region-header .form-required:after {
   background-image: url(../images/required.svg);
 }
+
 /* User Login block in the header region */
 .region-header #block-user-login {
   width: auto;
@@ -528,20 +524,30 @@ h1.site-name {
   float: right;
 }
 
-/* --------------- Main Menu ------------ */
-.menu--main {
+/* --------------- Menu Regions ------------ */
+
+/* Treat menu blocks in the menu regions as a special case. */
+.menu--primary .block-menu,
+.menu--secondary .block-menu {
+    float: none;
+    margin: 0;
+    font-size: inherit;
+}
+
+/* --------------- Primary Menu ------------ */
+.menu--primary {
   clear: both;
 }
-.menu--main .menu {
+.menu--primary .block-menu {
   font-size: 0.929em;
   margin: 0 5px;
   padding: 0;
   text-align: left; /* LTR */
 }
-[dir="rtl"] .menu--main .menu {
+[dir="rtl"] .menu--primary .block-menu{
   text-align: right;
 }
-.menu--main .menu li {
+.menu--primary .block-menu li {
   float: none;
   list-style: none;
   margin: 0;
@@ -549,7 +555,8 @@ h1.site-name {
   height: auto;
   width: 100%;
 }
-.menu--main .menu a {
+.menu--primary .block-menu a {
+  color: #333;
   background: #ccc;
   background: rgba(255, 255, 255, 0.7);
   float: none;
@@ -560,42 +567,37 @@ h1.site-name {
   margin: 4px 0;
   padding: 0.9em 0 0.9em 10px; /* LTR */
 }
-[dir="rtl"] .menu--main .menu a {
+[dir="rtl"] .menu--primary .block-menu a {
   padding: 0.9em 10px 0.9em 0;
 }
-.menu--main .menu a,
-.menu--main .menu a.active {
-  color: #333;
-}
-.menu--main .menu a:hover,
-.menu--main .menu a:focus {
+.menu--primary .block-menu a:hover,
+.menu--primary .block-menu a:focus {
   background: #f6f6f2;
   background: rgba(255, 255, 255, 0.95);
 }
-.menu--main .menu a:active {
+.menu--primary .block-menu a:active {
   background: #b3b3b3;
   background: rgba(255, 255, 255, 1);
 }
-.menu--main .menu li a.active {
+.menu--primary .block-menu li a.active {
   border-bottom: none;
 }
 
-/* ---------- Main Menu Toggle ----------- */
+/* ---------- Primary Menu Toggle ----------- */
 /* Hide the toggle by default. */
-.menu-toggle,
-.menu--main .menu-toggle-target {
+.menu-toggle {
   display: none;
 }
-/* Unhide it for the main menu. */
-.menu--main .menu-toggle-target {
+/* Unhide it for the primary menu. */
+.menu--primary .menu-toggle-target {
   display: inherit;
   position: fixed;
   top: 0;
 }
-.menu--main .menu-toggle {
+.menu--primary .menu-toggle {
   display: none;
 }
-body:not(:target) .menu--main .menu-toggle {
+body:not(:target) .menu--primary .menu-toggle {
   color: #333;
   background: #ccc;
   background: rgba(255, 255, 255, 0.7);
@@ -607,7 +609,7 @@ body:not(:target) .menu--main .menu-toggle {
   padding: 0.9em 10px 0.9em 10px;
   z-index: 1000;
 }
-body:not(:target) .menu--main .menu-toggle:after {
+body:not(:target) .menu--primary .menu-toggle:after {
   content:"";
   background: url(../../../misc/icons/ffffff/hamburger.svg) no-repeat;
   background-size: contain;
@@ -617,21 +619,18 @@ body:not(:target) .menu--main .menu-toggle:after {
   position: absolute;
   right: 10px; /* LTR */
 }
-body:not(:target) .menu--main .menu-toggle-target-show:target ~ .menu-toggle,
-body:not(:target) .menu--main .menu-toggle--hide {
+body:not(:target) .menu--primary .menu-toggle-target-show:target ~ .menu-toggle,
+body:not(:target) .menu--primary .menu-toggle--hide {
   display: none;
 }
-body:not(:target) .menu--main .menu-toggle-target-show:target ~ .menu-toggle--hide {
+body:not(:target) .menu--primary .menu-toggle-target-show:target ~ .menu-toggle--hide {
   display: block;
 }
-[dir="rtl"] .menu--account {
-  left: 10px;
-  right: auto;
-}
-.menu--main .menu .menu-hide a {
+
+.menu--primary .block-menu .menu-hide a {
   display: none;
 }
-body:not(:target) .menu--main .menu-toggle-target-show:target ~ .menu .menu-hide a {
+body:not(:target) .menu--primary .menu-toggle-target-show:target ~ .menu .menu-hide a {
   background-color: transparent;
   border: none;
   display: block;
@@ -644,45 +643,39 @@ body:not(:target) .menu--main .menu-toggle-target-show:target ~ .menu .menu-hide
   text-indent: -999em;
   z-index: 1001;
 }
-body:not(:target) .menu--main .menu li {
+body:not(:target) .menu--primary .block-menu li {
   height: 0;
   overflow: hidden;
 }
-body:not(:target) .menu--main .menu-toggle-target-show:target ~ .menu li {
+body:not(:target) .menu--primary .menu-toggle-target-show:target ~ .menu li {
   height: auto;
   overflow: visible;
 }
 
 /* --------------- Secondary Menu ------------ */
-.menu--account {
-  position: absolute;
-  top: 0;
-  right: 0; /* LTR */
-}
-[dir="rtl"] .menu--account {
-  right: inherit;
-  left: 0;
-}
-.menu--account .menu {
+
+.menu--secondary .block-menu {
   float: right; /* LTR */
-  right: 0; /* LTR */
   font-size: 0.929em;
   margin: 0 10px;
 }
-[dir="rtl"] .menu--account .menu {
-  float: left;
+
+[dir="rtl"] .menu--secondary .block-menu {
+    float: left;
+    left: 10px;
+    right: auto;
 }
-.menu--account .menu li {
+
+.menu--secondary .block-menu li{
   margin: 0;
   padding: 0;
-    display: inline;
 }
-.menu--account .menu a {
+.menu--secondary .block-menu a {
   display: inline-block;
   padding:  0.8em;
 }
-.menu--account .menu a:hover,
-.menu--main a:focus {
+.menu--secondary .block-menu a:hover,
+.menu--secondary .block-menu a:focus {
   text-decoration: underline;
 }
 
@@ -1876,7 +1869,7 @@ div.admin-panel .description {
 @media all and (min-width: 461px) and (max-width: 900px) {
   /* ------------ Header and Menus -------------------------- */
 
- .region-header {
+  .region-header {
     margin: 0 5px 0;
   }
   #logo,
@@ -1891,13 +1884,13 @@ div.admin-panel .description {
   .site-branding-text {
     padding: 10px 10px 8px;
   }
-  #header .block-menu .menu {
+  .menu--primary .block-menu {
     margin: 0 5px;
     padding: 0;
     text-align: center;
   }
-  .menu--main .menu li,
-  body:not(:target) .menu--main .menu li {
+  .menu--primary .block-menu li,
+  body:not(:target) .menu--primary .block-menu li {
     float: left; /* LTR */
     margin-right: 5px; /* LTR */
     padding: 0;
@@ -1906,26 +1899,26 @@ div.admin-panel .description {
     height: auto;
     overflow: visible;
   }
-  [dir="rtl"] .menu--main .menu li {
+  [dir="rtl"] .menu--primary .block-menu li {
     float: right;
     margin-left: 5px;
     margin-right: 0;
   }
-  .menu--main .menu li:nth-child(3n) {
+  .menu--primary .block-menu li:nth-child(3n) {
     margin-right: -5px; /* LTR */
   }
-  [dir="rtl"] .menu--main .menu li:nth-child(3n) {
+  [dir="rtl"] .menu--primary .block-menu li:nth-child(3n) {
     margin-left: -5px;
     margin-right: 0;
   }
-  .menu--main .menu a {
+  .menu--primary .block-menu a {
     float: none;
     display: block;
     border-radius: 8px;
     margin-bottom: 5px;
     padding: 0.9em 5px;
   }
-  body:not(:target) .menu--main .menu-toggle {
+  body:not(:target) .menu--primary .menu-toggle {
     display: none;
   }
 }
@@ -1956,13 +1949,13 @@ div.admin-panel .description {
   .site-name {
     font-size: 1.821em;
   }
-  #header .block-menu:first-child .menu {
+  .menu--primary .block-menu {
     font-size: 0.929em;
     margin: 0;
     padding: 0 15px;
   }
-  .menu--main .menu li,
-  body:not(:target) .menu--main .menu li {
+  .menu--primary .block-menus li,
+  body:not(:target) .menu--primary .block-menu li {
     float: left; /* LTR */
     list-style: none;
     padding: 0 1px;
@@ -1971,26 +1964,26 @@ div.admin-panel .description {
     height: auto;
     overflow: visible;
   }
-  [dir="rtl"] .menu--main .menu li {
+  [dir="rtl"] .menu--primary .block-menu li {
     float: right;
   }
-  .menu--main .menu a {
+  .menu--primary .block-menu a {
     float: left; /* LTR */
     padding: 0.7em 0.8em;
     margin-bottom: 0;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
-  [dir="rtl"] .menu--main .menu a {
+  [dir="rtl"] .menu--primary .block-menu a {
     float: right;
     padding: 0.7em 0.8em;
   }
-  .menu--main .menu li a:active,
-  .menu--main .menu li a.active {
+  .featured .menu--primary .block-menu li a:active,
+  .featured .menu--primary .block-menu li a.active {
     background: #f0f0f0;
     background: rgba(240, 240, 240, 1.0);
   }
-  body:not(:target) .menu--main .menu-toggle {
+  body:not(:target) .menu--primary .menu-toggle {
     display: none;
   }
 }
diff --git a/core/themes/bartik/templates/block--system-menu-block.html.twig b/core/themes/bartik/templates/block--system-menu-block.html.twig
index b6c0412..d8c5dd4 100644
--- a/core/themes/bartik/templates/block--system-menu-block.html.twig
+++ b/core/themes/bartik/templates/block--system-menu-block.html.twig
@@ -19,4 +19,4 @@
     <a class="menu-toggle menu-toggle--hide" href="#{{ hide_anchor }}">{{ 'Menu'|t }}</a>
   {% endif %}
   {{ content }}
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/core/themes/bartik/templates/page.html.twig b/core/themes/bartik/templates/page.html.twig
index b6fb10f..a74283b 100644
--- a/core/themes/bartik/templates/page.html.twig
+++ b/core/themes/bartik/templates/page.html.twig
@@ -54,6 +54,8 @@
  *
  * Regions:
  * - page.header: Items for the header region.
+ * - page.primary_menu: Items for the primary menu region.
+ * - page.secondary_menu: Items for the secondary menu region.
  * - page.featured: Items for the featured region.
  * - page.highlighted: Items for the highlighted content region.
  * - page.help: Dynamic help text, mostly for admin pages.
@@ -77,6 +79,13 @@
 <div id="page-wrapper"><div id="page">
 
   <header id="header" role="banner" aria-label="{{ 'Site header'|t}}"><div class="section clearfix">
+
+    {% if page.secondary_menu %}
+      <div class="menu--secondary">
+        {{ page.secondary_menu }}
+      </div>
+    {% endif %}
+
     {% if logo %}
       <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home" id="logo">
         <img src="{{ logo }}" alt="{{ 'Home'|t }}" />
@@ -110,6 +119,12 @@
 
     {{ page.header }}
 
+    {% if page.primary_menu %}
+      <div class="menu--primary">
+        {{ page.primary_menu }}
+      </div>
+    {% endif %}
+
   </div></header> <!-- /.section, /#header-->
 
   {% if messages %}