diff --git a/_includes/nav-components.html b/_includes/nav-components.html
index baf462322b..109df8a11c 100644
--- a/_includes/nav-components.html
+++ b/_includes/nav-components.html
@@ -80,7 +80,13 @@
     <li><a href="#type-components-page-header">Page header</a></li>
   </ul>
 </li>
-<li><a href="#thumbnails">Thumbnails</a></li>
+<li>
+  <a href="#thumbnails">Thumbnails</a>
+  <ul class="nav">
+    <li><a href="#thumbnails-default">Default thumbnails</a></li>
+    <li><a href="#thumbnails-custom-content">Custom content</a></li>
+  </ul>
+</li>
 <li>
   <a href="#alerts">Alerts</a>
   <ul class="nav">
@@ -99,7 +105,13 @@
     <li><a href="#progress-stacked">Stacked</a></li>
   </ul>
 </li>
-<li><a href="#media">Media object</a></li>
+<li>
+  <a href="#media">Media object</a>
+  <ul class="nav">
+    <li><a href="#media-default">Default media</a></li>
+    <li><a href="#media-list">Media list</a></li>
+  </ul>
+</li>
 <li>
   <a href="#list-group">List group</a>
   <ul class="nav">
diff --git a/components.html b/components.html
index d5ee08cc39..86b4e71da4 100644
--- a/components.html
+++ b/components.html
@@ -1694,7 +1694,7 @@ body { padding-bottom: 70px; }
     </div>
     <p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
 
-    <h3>Default thumbnails</h3>
+    <h3 id="thumbnails-default">Default thumbnails</h3>
     <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
     <div class="bs-example">
       <div class="row">
@@ -1731,7 +1731,7 @@ body { padding-bottom: 70px; }
 </div>
 {% endhighlight %}
 
-    <h3>Custom content thumbnails</h3>
+    <h3 id="thumbnails-custom-content">Custom content thumbnails</h3>
     <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
     <div class="bs-example">
       <div class="row">
@@ -1999,7 +1999,7 @@ body { padding-bottom: 70px; }
     </div>
     <p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>
 
-    <h3>Default example</h3>
+    <h3 id="media-default">Default media</h3>
     <p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p>
     <div class="bs-example">
       <div class="media">
@@ -2042,7 +2042,7 @@ body { padding-bottom: 70px; }
 </div>
 {% endhighlight %}
 
-    <h3>Media list</h3>
+    <h3 id="media-list">Media list</h3>
     <p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
     <div class="bs-example">
       <ul class="media-list">