Update top bar docs to show example of advanced top bar layout added in #7944

diff --git a/docs/pages/top-bar.md b/docs/pages/top-bar.md
index af81e03586c49e2ca71739bd869c9402a4e2d2ec..d36f9094cc8e01bbacb16f520651132e332e30b0 100644 (file)
--- a/docs/pages/top-bar.md
+++ b/docs/pages/top-bar.md
@@ -19,9 +19,9 @@ In the below example, our top bar includes a [dropdown menu](dropdown-menu.html)
   <div class="top-bar-left">
     <ul class="dropdown menu" data-dropdown-menu>
       <li class="menu-text">Site Title</li>
-      <li class="has-submenu">
+      <li>
         <a href="#">One</a>
-        <ul class="submenu menu vertical" data-submenu>
+        <ul class="menu vertical">
           <li><a href="#">One</a></li>
           <li><a href="#">Two</a></li>
           <li><a href="#">Three</a></li>
@@ -40,3 +40,53 @@ In the below example, our top bar includes a [dropdown menu](dropdown-menu.html)
 </div>
 ```
 
+---
+
+## Advanced
+
+You can further divide a top bar into a title area and content area. Use the `.top-bar-title` class to create a title/branding area. Next to that can be any element, which is used for the rest of the content.
+
+```html
+<div class="top-bar">
+  <div class="top-bar-title"></div>
+  <div>
+    <div class="top-bar-left"></div>
+    <div class="top-bar-left"></div>
+  </div>
+</div>
+```
+
+In the below example, we've combined the above pattern with the Responsive Toggler plugin, creating a responsive top bar with a toggle click trigger on mobile.
+
+```html_example
+<div class="top-bar">
+  <div class="top-bar-title">
+    <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
+      <span class="menu-icon dark" data-toggle></span>
+    </span>
+    <strong>Site Title</strong>
+  </div>
+  <div id="responsive-menu">
+    <div class="top-bar-left">
+      <ul class="dropdown menu" data-dropdown-menu>
+        <li>
+          <a href="#">One</a>
+          <ul class="menu vertical">
+            <li><a href="#">One</a></li>
+            <li><a href="#">Two</a></li>
+            <li><a href="#">Three</a></li>
+          </ul>
+        </li>
+        <li><a href="#">Two</a></li>
+        <li><a href="#">Three</a></li>
+      </ul>
+    </div>
+    <div class="top-bar-right">
+      <ul class="menu">
+        <li><input type="search" placeholder="Search"></li>
+        <li><button type="button" class="button">Search</button></li>
+      </ul>
+    </div>
+  </div>
+</div>
+```