diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index 81741d55849fd53b07fd868ab0da2dc2542273a9..20050f7cb3774dc4a0f671e692250e584e978978 100644
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -11,7 +11,7 @@ forms:
 base:
   title: Base
   icon: package
-  columns: 3
+  columns: 2
   children:
     empty:
       title: Empty page
@@ -22,7 +22,6 @@ base:
     buttons:
       url: buttons.html
       title: Buttons
-      badge: New
     cards:
       url: cards.html
       title: Cards
@@ -54,18 +53,7 @@ base:
     lists:
       title: Lists
       url: lists.html
-    users:
-      title: Users
-      url: users.html
-    gallery:
-      title: Gallery
-      url: gallery.html
-    profile:
-      title: Profile
-      url: profile.html
-    music:
-      title: Music
-      url: music.html
+
 
     authentication:
       title: Authentication
@@ -125,9 +113,21 @@ extra:
     search-results:
       title: Search results
       url: search-results.html
-    pricing cards:
+    pricing-cards:
       url: pricing.html
       title: Pricing cards
+    users:
+      title: Users
+      url: users.html
+    gallery:
+      title: Gallery
+      url: gallery.html
+    profile:
+      title: Profile
+      url: profile.html
+    music:
+      title: Music
+      url: music.html
 docs:
   title: Docs
   icon: file-text
@@ -208,7 +208,6 @@ docs:
       url: docs/range-slider.html
     ribbons: 
       title: Ribbons
-      badge: New
       url: docs/ribbons.html
     spinners: 
       title: Spinners
diff --git a/pages/_includes/ui/dropdown-menu-all.html b/pages/_includes/ui/dropdown-menu-all.html
index 90c703d988fddb73be92783760a2bb742b2f17db..6d3a01c282b4267ad1bd89905f3856c057b15915 100644
--- a/pages/_includes/ui/dropdown-menu-all.html
+++ b/pages/_includes/ui/dropdown-menu-all.html
@@ -1,4 +1,4 @@
-<div class="dropdown-menu position-relative d-inline-block mr-3 mb-3 align-top">
+<div class="dropdown-menu{% if include.show %} dropdown-menu-demo{% endif %}">
 
 	<h6 class="dropdown-header">Dropdown header</h6>
 	<a href="#" class="dropdown-item">{% include ui/icon.html icon="activity" class="dropdown-item-icon" %} Item 1</a>
@@ -25,5 +25,11 @@
 
 	<div class="dropdown-divider"></div>
 
+	{% for person in site.data.people limit: 3 %}
+	<a href="#" class="dropdown-item">{% include ui/avatar.html person-id=person.id size="sm" class="rounded mr-2" %} {{ person.full_name }}</a>
+	{% endfor %}
+
+	<div class="dropdown-divider"></div>
+
 	<a href="#" class="dropdown-item">{% include ui/icon.html icon="log-out" class="dropdown-item-icon" %} Logout</a>
 </div>
diff --git a/pages/_includes/ui/dropdown-menu.html b/pages/_includes/ui/dropdown-menu.html
index 4324a18c80c2ed509c68260f334c084f05d3a8ae..869eacc1be5d3f51ca28a92f0c92c96e4306d25d 100644
--- a/pages/_includes/ui/dropdown-menu.html
+++ b/pages/_includes/ui/dropdown-menu.html
@@ -1,8 +1,12 @@
-<div class="dropdown-menu{% if include.right %} dropdown-menu-right{% endif %}{% if include.show %} position-relative d-inline-block{% endif %}{% if include.arrow %} dropdown-menu-arrow{% endif %}{% if include.dark %} bg-dark text-white{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+<div class="dropdown-menu{% if include.right %} dropdown-menu-right{% endif %}{% if include.show %} dropdown-menu-demo{% endif %}{% if include.arrow %} dropdown-menu-arrow{% endif %}{% if include.dark %} bg-dark text-white{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 	{% if include.check or include.radio %}
 		{% for i in (1..3) %}
 		<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="{% if include.radio %}radio{% else %}checkbox{% endif %}"> Option {{ i }}</label>
 		{% endfor %}
+	{% elsif include.people %}
+		{% for person in site.data.people limit: 5 %}
+		<a href="#" class="dropdown-item">{% include ui/avatar.html person-id=person.id size="sm" class="rounded mr-2" %} {{ person.full_name }}</a>
+		{% endfor %}
 	{% elsif include.type == 'text' %}
 
 	{% else %}
diff --git a/pages/dropdowns.html b/pages/dropdowns.html
index d9be423c413a2c7adae0f3172804ec93fa371bcd..dc1eed27517290f6283b847734327e26beabf6ed 100644
--- a/pages/dropdowns.html
+++ b/pages/dropdowns.html
@@ -1,25 +1,41 @@
 ---
 title: Dropdowns
 page-header: Dropdowns
+menu: base.dropdowns
 ---
 
+<div class="row">
+	<div class="col-sm-6 col-lg-3">
+		{% include ui/dropdown-menu-all.html show=true %}
+	</div>
+	<div class="col-sm-6 col-lg-3">
+		{% include ui/dropdown-menu.html show=true %}
+		{% include ui/dropdown-menu.html show=true separated=true %}
+		{% include ui/dropdown-menu.html show=true active=true %}
+		{% include ui/dropdown-menu.html show=true disabled=true %}
+		{% include ui/dropdown-menu.html show=true header=true %}
+		{% include ui/dropdown-menu.html show=true icons=true header=true %}
+		{% include ui/dropdown-menu.html show=true arrow=true %}
+	</div>
+	<div class="col-sm-6 col-lg-3">
+		{% include ui/dropdown-menu.html show=true %}
+		{% include ui/dropdown-menu.html show=true separated=true %}
+		{% include ui/dropdown-menu.html show=true active=true %}
+		{% include ui/dropdown-menu.html show=true disabled=true %}
+		{% include ui/dropdown-menu.html show=true header=true %}
+		{% include ui/dropdown-menu.html show=true icons=true %}
+		{% include ui/dropdown-menu.html show=true badge=true %}
+	</div>
+	<div class="col-sm-6 col-lg-3">
+		{% include ui/dropdown-menu.html show=true dark=true %}
+		{% include ui/dropdown-menu.html show=true dark=true separated=true %}
+		{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true %}
+		{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true icons=true %}
+		{% include ui/dropdown-menu.html show=true check=true %}
+		{% include ui/dropdown-menu.html show=true radio=true %}
+		{% include ui/dropdown-menu.html show=true people=true %}
+	</div>
+</div>
 
 
-{% include ui/dropdown-menu-all.html %}
 
-
-{% include ui/dropdown-menu.html show=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true separated=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true active=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true disabled=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true header=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true icons=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true icons=true header=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true arrow=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true dark=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true dark=true separated=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true icons=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true badge=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true check=true class="mr-3 mb-3 align-top" %}
-{% include ui/dropdown-menu.html show=true radio=true class="mr-3 mb-3 align-top" %}
diff --git a/pages/gallery.html b/pages/gallery.html
index bd93b922fbc17d1c3cf42b7305d7e9a11a4363e0..8324e3f8b3400882f00c8bba8f76bd435638ea15 100644
--- a/pages/gallery.html
+++ b/pages/gallery.html
@@ -4,7 +4,7 @@ page-header: Gallery
 page-header-description: 1-12 of 241 photos
 page-header-actions: photos
 done: true
-menu: base.gallery
+menu: extra.gallery
 ---
 {% assign horizontal = 0 %}
 
diff --git a/pages/music.html b/pages/music.html
index 5244894f075640779f296312ab867d1076ce25e3..2f4259b903dd785313ce33ee1047403781edd368 100644
--- a/pages/music.html
+++ b/pages/music.html
@@ -1,7 +1,7 @@
 ---
 title: Music components
 page-header: Music components
-menu: base.music
+menu: extra.music
 ---
 
 <div class="row">
diff --git a/pages/profile.html b/pages/profile.html
index f29fc20d427dad0689d09c904be9c319e00ba16f..657efbdf0bc9bdca46bd8700fde47aa9d397f32d 100644
--- a/pages/profile.html
+++ b/pages/profile.html
@@ -1,7 +1,7 @@
 ---
 title: Profile
 page-header: Profile
-menu: base.profile
+menu: extra.profile
 ---
 
 <div class="row">
diff --git a/pages/users.html b/pages/users.html
index 441ace54ed30221b583bb3e8849578f2071228bd..fb2a52ff42ca0a8afb23d7b3f0bc86ecd9f7b7eb 100644
--- a/pages/users.html
+++ b/pages/users.html
@@ -5,7 +5,7 @@ page-header: Users
 page-header-actions: users
 page-header-description: 1-18 of 413 people
 done: true
-menu: base.users
+menu: extra.users
 ---
 
 <div class="row">
diff --git a/scss/demo.scss b/scss/demo.scss
index 1d9de9ee50492536e1b871147fbc47e4e16f4aa4..308494de84eb6f054c9abb4e9fe348c6f9384f94 100644
--- a/scss/demo.scss
+++ b/scss/demo.scss
@@ -33,4 +33,12 @@ body.no-transitions * {
   a {
     color: $text-muted;
   }
+}
+
+.dropdown-menu-demo {
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  top: 0;
+  margin-bottom: 1rem;
 }
\ No newline at end of file