Added a new UI sample that highlights additional items in the breadcrumb.

ui-samples-plugin/src/main/java/jenkins/plugins/ui_samples/InpageNavigationWithBreadcrumb.java

+package jenkins.plugins.ui_samples;
+
+import hudson.Extension;
+
+import java.util.Arrays;
+import java.util.List;
+
+/**
+ * @author Kohsuke Kawaguchi
+ */
+@Extension
+public class InpageNavigationWithBreadcrumb extends UISample {
+    @Override
+    public String getDescription() {
+        return "Adds in-page navigation with extra breadcrumb";
+    }
+
+    public List<SourceFile> getSourceFiles() {
+        // TODO: generate this from index
+        return Arrays.asList(
+                new SourceFile("index.groovy"),
+                new SourceFile("header.groovy"));
+    }
+
+    @Extension
+    public static final class DescriptorImpl extends UISampleDescriptor {
+    }
+}
+
+

ui-samples-plugin/src/main/resources/jenkins/plugins/ui_samples/InpageNavigationWithBreadcrumb/header.groovy

+package jenkins.plugins.ui_samples.InpageNavigationWithBreadcrumb
+
+def l=namespace(lib.LayoutTagLib.class)
+
+// put them under your l.layout
+l.breadcrumb(title:"Click me! Click me!",id:"id-of-breadcrumb-item")

ui-samples-plugin/src/main/resources/jenkins/plugins/ui_samples/InpageNavigationWithBreadcrumb/index.groovy

+package jenkins.plugins.ui_samples.InpageNavigationWithBreadcrumb;
+
+import lib.JenkinsTagLib
+
+def st=namespace("jelly:stapler")
+
+t=namespace(JenkinsTagLib.class)
+
+namespace("/lib/samples").sample(title:_("In-page navigation via breadcrumb")) {
+    raw(_("blurb"))
+
+    script """
+    Event.observe(window,"load",function(){
+      var menu = new breadcrumbs.ContextMenu();
+      menu.add('#section1',rootURL+"/images/24x24/gear.png","Section 1")
+      menu.add('#section2',rootURL+"/images/24x24/gear.png","Section 2")
+      breadcrumbs.attachMenu('id-of-breadcrumb-item',menu);
+    });
+"""
+
+}

ui-samples-plugin/src/main/resources/jenkins/plugins/ui_samples/InpageNavigationWithBreadcrumb/index.properties

+blurb=You can add arbitrary additional items to the breadcrumb bar (see above), and associate menus with them. \
+  This mechanism is convenient for adding anchors to a large page and provide quick access to the key parts. \
+  A very typical place where you want to do this is in the configuration page. There's a <f:breadcrumb-config-outline> \
+  tag specifically for this use case, which parses <f:section>s and use that to build the context menu. \
+  See the freestyle job configuration page for an example of using this tag.
\ No newline at end of file

ui-samples-plugin/src/main/resources/jenkins/plugins/ui_samples/NotificationBar/index.groovy

@@ -9,7 +9,7 @@ t=namespace(JenkinsTagLib.class)
 namespace("/lib/samples").sample(title:_("Notification Bar")) {
     raw(_("blurb"))
 
-    raw("To show a notification bar, call <tt>notificationBar.show('message')</tt><")
+    raw("To show a notification bar, call <tt>notificationBar.show('message')</tt>")
     button(onclick:"notificationBar.show('This is a notification');", "Show a notification bar")
 
     raw(_("blurb.hide"))

ui-samples-plugin/src/main/resources/lib/samples/sample.jelly

@@ -32,6 +32,7 @@ THE SOFTWARE.
   <j:set var="instance" value="${it}" />
   <j:set var="descriptor" value="${it.descriptor}" />
   <l:layout title="${title}">
+    <st:include page="header" optional="true" />
     <l:main-panel>
       <h1>${title}</h1>
       <p>