diff --git a/_config.yml b/_config.yml
index c8869170c..54cb0f2c6 100644
--- a/_config.yml
+++ b/_config.yml
@@ -61,23 +61,19 @@ defaults:
       path: "*.md"
     values:
       layout: markdown
-      menu-layout: horizontal
 
   - scope:
       type: "pages"
     values:
       layout: default
-      menu-layout: horizontal
   - scope:
       type: "docs"
     values:
       layout: docs
-      menu-layout: horizontal
   - scope:
       type: "components"
     values:
       layout: component
-      menu-layout: horizontal
 
 
 colors:
diff --git a/pages/_data/layouts.yml b/pages/_data/layouts.yml
index e6c8dc27a..8fc2f4277 100644
--- a/pages/_data/layouts.yml
+++ b/pages/_data/layouts.yml
@@ -1,24 +1,35 @@
 - title: Default tabler layout
+  page: layouts.html
   config:
     topmenu: true
 
 - title: Dark navigation
+  page: layout-dark-navigation.html
   config:
     topmenu: true
     topmenu-dark: true
 
+- title: Dark topnav
+  page: layout-dark-topnav.html
+  config:
+    topmenu: true
+    topnav-dark: true
+
 - title: Sidebar
+  page: layout-sidebar.html
   new: true
   config:
     sidebar: true
 
 - title: Dark sidebar
+  page: layout-sidebar-dark.html
   new: true
   config:
     sidebar: true
     sidebar-dark: true
 
 - title: Narrow sidebar
+  page: layout-sidebar-narrow.html
   new: true
   config:
     sidebar: true
@@ -26,17 +37,20 @@
     sidebar-dark: true
 
 - title: Right sidebar
+  page: layout-sidebar-right.html
   new: true
   config:
     sidebar-right: true
 
 - title: Sidebar only
+  page: layout-sidebar-only.html
   new: true
   config:
     sidebar: true
     hide-topnav: true
 
 - title: Dark mode
+  page: layout-dark.html
   soon: true
   config:
     sidebar: true
diff --git a/pages/_includes/layout/layouts-list.html b/pages/_includes/layout/layouts-list.html
index 1c0ec0878..7f826a7ab 100644
--- a/pages/_includes/layout/layouts-list.html
+++ b/pages/_includes/layout/layouts-list.html
@@ -4,7 +4,7 @@
 		<div class="row">
 			<div class="col-auto">
 				<a href="{{ site.base }}/{{ layout.page }}" class="position-relative">
-					{% include parts/demo-layout.html topmenu=layout.config.topmenu topmenu-dark=layout.config.topmenu-dark sidebar=layout.config.sidebar sidebar-narrow=layout.config.sidebar-narrow sidebar-right=layout.config.sidebar-right sidebar-dark=layout.config.sidebar-dark hide-topnav=layout.config.hide-topnav %}
+					{% include parts/demo-layout.html config=layout.config %}
 				</a>
 			</div>
 			<div class="col">
diff --git a/pages/_includes/layout/navbar.html b/pages/_includes/layout/navbar.html
index a098c9fc0..638347ead 100644
--- a/pages/_includes/layout/navbar.html
+++ b/pages/_includes/layout/navbar.html
@@ -1,10 +1,10 @@
 {% assign person-id = include.person-id | default: 12 | minus: 1 %}
 {% assign person = site.data.people[person-id] %}
 
-{% if include.menu-layout != 'vertical' %}
-{% include layout/navbar-logo.html class="mr-4" %}
-{% else %}
+{% if page.sidebar %}
 {% include layout/navbar-search.html class="mr-4" %}
+{% else %}
+{% include layout/navbar-logo.html class="mr-4" %}
 {% endif %}
 
 <ul class="nav navbar-menu align-items-center ml-auto">
diff --git a/pages/_includes/layout/sidebar.html b/pages/_includes/layout/sidebar.html
index dd42d40c3..224b1f76d 100644
--- a/pages/_includes/layout/sidebar.html
+++ b/pages/_includes/layout/sidebar.html
@@ -1,4 +1,4 @@
-<aside class="sidebar sidebar-dark">
+<aside class="sidebar{% if page.sidebar-dark %} sidebar-dark{% endif %}{% if page.sidebar-narrow %} sidebar-narrow{% endif %}{% if page.sidebar-right %} sidebar-right{% endif %}">
 	<!-- Sidebar logo -->
 	{% include layout/navbar-logo.html prefix="sidebar" %}
 
diff --git a/pages/_includes/parts/demo-layout.html b/pages/_includes/parts/demo-layout.html
index 7c4a103a2..4e5edc474 100644
--- a/pages/_includes/parts/demo-layout.html
+++ b/pages/_includes/parts/demo-layout.html
@@ -1,18 +1,19 @@
+{% assign config = include.config %}
 <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
 	<div class="row row-0 flex-fill">
-		{% if include.sidebar %}
-		<div class="{% if include.sidebar-narrow %}col-auto w-2{% else %}col-3{% endif %} {% if include.sidebar-dark %}bg-dark{% else %}border-right bg-white{% endif %}"></div>
+		{% if config.sidebar %}
+		<div class="{% if config.sidebar-narrow %}col-auto w-2{% else %}col-3{% endif %} {% if config.sidebar-dark %}bg-dark{% else %}border-right bg-white{% endif %}"></div>
 		{% endif %}
 		<div class="col">
-			{% unless include.hide-topnav %}
-			<div class="border-bottom h-2 bg-white"></div>
+			{% unless config.hide-topnav %}
+			<div class="h-2 {% if config.topnav-dark %}bg-dark{% else %}border-bottom bg-white{% endif %}"></div>
 			{% endunless %}
-			{% if include.topmenu %}
-			<div class="h-2 {% if include.topmenu-dark %}bg-dark{% else %}border-bottom bg-white{% endif %}"></div>
+			{% if config.topmenu %}
+			<div class="h-2 {% if config.topmenu-dark %}bg-dark{% else %}border-bottom bg-white{% endif %}"></div>
 			{% endif %}
 		</div>
-		{% if include.sidebar-right %}
-		<div class="col-3 {% if include.sidebar-dark %}bg-dark{% else %}border-left bg-white{% endif %}"></div>
+		{% if config.sidebar-right %}
+		<div class="col-3 {% if config.sidebar-dark %}bg-dark{% else %}border-left bg-white{% endif %}"></div>
 		{% endif %}
 	</div>
 </div>
diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html
index 8ee88c9eb..f416f1817 100644
--- a/pages/_layouts/default.html
+++ b/pages/_layouts/default.html
@@ -4,16 +4,16 @@ layout: base
 
 <div class="wrapper">
 
-	{% if page.menu-layout == 'vertical' %}
+	{% if page.sidebar %}
 		{% include layout/sidebar.html %}
 	{% endif %}
 
 	<div class="content">
-		{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
+		{% include layout/topnav.html %}
 
-		{% if page.menu-layout != 'vertical' %}
+		{% unless page.sidebar %}
 			{% include layout/topmenu.html %}
-		{% endif %}
+		{% endunless %}
 
 		<div class="content-page">
 			<main class="container{% if page.container-size %}-{{ page.container-size }}{% endif %} my-4 flex-fill">
diff --git a/pages/index.html b/pages/index.html
index 516efda9c..401f49f16 100644
--- a/pages/index.html
+++ b/pages/index.html
@@ -4,7 +4,6 @@ page-title: Dashboard
 page-pretitle: Overview
 page-title-actions: buttons
 menu: home
-menu-layout: vertical
 ---
 
 {% include layout/homepage.html %}
diff --git a/pages/layout-dark-navigation.html b/pages/layout-dark-navigation.html
new file mode 100644
index 000000000..59cfb6146
--- /dev/null
+++ b/pages/layout-dark-navigation.html
@@ -0,0 +1,6 @@
+---
+page-title: Page Layouts
+menu: layouts
+---
+
+{% include layout/layouts.html %}
diff --git a/pages/layout-dark-topnav.html b/pages/layout-dark-topnav.html
new file mode 100644
index 000000000..59cfb6146
--- /dev/null
+++ b/pages/layout-dark-topnav.html
@@ -0,0 +1,6 @@
+---
+page-title: Page Layouts
+menu: layouts
+---
+
+{% include layout/layouts.html %}
diff --git a/pages/layout-dark.html b/pages/layout-dark.html
new file mode 100644
index 000000000..59cfb6146
--- /dev/null
+++ b/pages/layout-dark.html
@@ -0,0 +1,6 @@
+---
+page-title: Page Layouts
+menu: layouts
+---
+
+{% include layout/layouts.html %}
diff --git a/pages/layout-sidebar-dark.html b/pages/layout-sidebar-dark.html
new file mode 100644
index 000000000..c9da13271
--- /dev/null
+++ b/pages/layout-sidebar-dark.html
@@ -0,0 +1,8 @@
+---
+page-title: Page Layouts
+menu: layouts
+sidebar: true
+sidebar-dark: true
+---
+
+{% include layout/layouts.html %}
diff --git a/pages/layout-sidebar-narrow.html b/pages/layout-sidebar-narrow.html
new file mode 100644
index 000000000..1b22cb659
--- /dev/null
+++ b/pages/layout-sidebar-narrow.html
@@ -0,0 +1,9 @@
+---
+page-title: Page Layouts
+menu: layouts
+sidebar: true
+sidebar-dark: true
+sidebar-narrow: true
+---
+
+{% include layout/layouts.html %}
diff --git a/pages/layout-sidebar-only.html b/pages/layout-sidebar-only.html
new file mode 100644
index 000000000..2bc0f2950
--- /dev/null
+++ b/pages/layout-sidebar-only.html
@@ -0,0 +1,7 @@
+---
+page-title: Page Layouts
+menu: layouts
+sidebar: true
+---
+
+{% include layout/layouts.html %}
diff --git a/pages/layout-sidebar-right.html b/pages/layout-sidebar-right.html
new file mode 100644
index 000000000..a1f5ce439
--- /dev/null
+++ b/pages/layout-sidebar-right.html
@@ -0,0 +1,8 @@
+---
+page-title: Page Layouts
+menu: layouts
+sidebar: true
+sidebar-right: true
+---
+
+{% include layout/layouts.html %}
diff --git a/pages/layout-sidebar.html b/pages/layout-sidebar.html
new file mode 100644
index 000000000..2bc0f2950
--- /dev/null
+++ b/pages/layout-sidebar.html
@@ -0,0 +1,7 @@
+---
+page-title: Page Layouts
+menu: layouts
+sidebar: true
+---
+
+{% include layout/layouts.html %}
diff --git a/pages/layout-test.html b/pages/layout-test.html
deleted file mode 100644
index 697015e6a..000000000
--- a/pages/layout-test.html
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: Layout test
-sidenav: true
-sidenav-dark: true
-page-title: Layout test
-page-title-actions: breadcrumb
-menu: base.buttons
----
-
-<div class="card" id="card-test">
-   <div class="card-body">
-<!--      <a href="#" class="btn btn-secondary btn-block" data-toggle="menubar">sidebar</a>-->
-      <div id="card-size"></div>
-      <div>
-         <h1>Well, she turned me into a newt.</h1>
-         <p>We want a shrubbery!! Burn her anyway! You don't vote for kings. Where'd you get the coconuts?</p>
-         <p>And this isn't my nose. This is a false one. But you are dressed as one… Oh, ow! I don't want to talk to you no more, you empty-headed animal food trough water! <strong> I fart in your general direction!</strong> <em> Your mother was a hamster and your father smelt of elderberries!</em> Now leave before I am forced to taunt you a second time!</p>
-         <h2>Burn her!</h2>
-         <p>We shall say 'Ni' again to you, if you do not appease us. The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.</p>
-         <ol>
-            <li>Oh, ow!</li><li>Be quiet!</li><li>Well, we did do the nose.</li>
-         </ol>
-
-         <h3>What a strange person.</h3>
-         <p>Well, she turned me into a newt. And the hat. She's a witch! Well, how'd you become king, then? She looks like one. Look, my liege!</p>
-         <ul>
-            <li>We found them.</li><li>Well, how'd you become king, then?</li><li>Did you dress her up like this?</li>
-         </ul>
-
-         <p>It's only a model. I'm not a witch. Who's that then? Did you dress her up like this? Look, my liege!</p>
-         <p>Well, she turned me into a newt. The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king.</p>
-         <p>Oh, ow! Look, my liege! Burn her! You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Well, Mercia's a temperate zone!</p>
-         <p>Well, how'd you become king, then? How do you know she is a witch? We shall say 'Ni' again to you, if you do not appease us. You can't expect to wield supreme power just 'cause some watery tart threw a sword at you!</p>
-         <p>Look, my liege! I dunno. Must be a king. A newt? What do you mean? Oh, ow! He hasn't got shit all over him.</p>
-         <p>Now, look here, my good man. She looks like one. And this isn't my nose. This is a false one. Bring her forward!</p>
-         <p>You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Camelot! Well, how'd you become king, then? Why?</p>
-         <p>And the hat. She's a witch! It's only a model. Well, how'd you become king, then? Well, I didn't vote for you. Why?</p>
-         <p>Ni! Ni! Ni! Ni! Ni! Ni! Ni! Ni! Camelot! We shall say 'Ni' again to you, if you do not appease us. Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed!</p>
-         <p>Why do you think that she is a witch? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Where'd you get the coconuts? …Are you suggesting that coconuts migrate?</p>
-         <p>Well, what do you want? Did you dress her up like this? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. On second thoughts, let's not go there. It is a silly place.</p>
-      </div>
-   </div>
-</div>
-
-{% capture_global scripts %}
-<script>
-	$(document).ready(function () {
-		var $test_el = $('#card-test'),
-			$test_body_el = $('#card-size'),
-			test_width = function () {
-				$test_body_el.text($test_el.width());
-			};
-
-		test_width();
-
-		$(window).on('resize', function () {
-			test_width();
-		});
-	});
-</script>
-{% endcapture_global %}
diff --git a/pages/search-results.html b/pages/search-results.html
index 4f048abbf..7a8da8f52 100644
--- a/pages/search-results.html
+++ b/pages/search-results.html
@@ -2,7 +2,6 @@
 page-title: Search results
 page-title-description: About 2,410 result (0.19 seconds)
 menu: extra.search-results
-menu-layout: horizontal
 ---
 
 <div class="row">