docs(material/toolbar): add navigation bar example (angular#33420)

Author: BHUVANSH855

src/components-examples/material/toolbar/index.ts

@@ -3,3 +3,4 @@ export {ToolbarMultirowExample} from './toolbar-multirow/toolbar-multirow-exampl
 export {ToolbarSimpleExample} from './toolbar-simple/toolbar-simple-example';
 export {ToolbarOverviewExample} from './toolbar-overview/toolbar-overview-example';
 export {ToolbarHarnessExample} from './toolbar-harness/toolbar-harness-example';
+export {ToolbarNavbarExample} from './toolbar-navbar/toolbar-navbar-example';

src/components-examples/material/toolbar/toolbar-navbar/toolbar-navbar-example.css

@@ -0,0 +1,3 @@
+.example-spacer {
+  flex: 1 1 auto;
+}

src/components-examples/material/toolbar/toolbar-navbar/toolbar-navbar-example.html

@@ -0,0 +1,10 @@
+<mat-toolbar>
+  <span>My App</span>
+
+  <span class="example-spacer"></span>
+
+  <a mat-button>Home</a>
+  <a mat-button>Products</a>
+  <a mat-button>Pricing</a>
+  <a mat-button>About</a>
+</mat-toolbar>

src/components-examples/material/toolbar/toolbar-navbar/toolbar-navbar-example.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatToolbarModule} from '@angular/material/toolbar';
+
+/**
+ * @title Toolbar as a navigation bar
+ */
+@Component({
+  selector: 'toolbar-navbar-example',
+  templateUrl: 'toolbar-navbar-example.html',
+  styleUrl: 'toolbar-navbar-example.css',
+  imports: [MatToolbarModule, MatButtonModule],
+})
+export class ToolbarNavbarExample {}

src/material/toolbar/toolbar.md

@@ -36,6 +36,13 @@ easily accomplished with `display: flex`:
               "file":"toolbar-multirow-example.css", 
               "region":"toolbar-position-content-style"}) -->
 
+### Navigation bar
+
+A common use case for a toolbar is as a navigation bar containing links to
+different sections of an application.
+
+<!-- example(toolbar-navbar) -->
+
 ### Accessibility
 By default, the toolbar assumes that it will be used in a purely decorative fashion and thus sets
 no roles, ARIA attributes, or keyboard shortcuts. This is equivalent to having a sequence of `<div>`