> For the complete documentation index, see [llms.txt](https://ed.sunbird.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ed.sunbird.org/release-6.0.0/use/source-code/ui-user-interface-sunbird-ed-portal/angular-material/customazion/components/toolbar.md).

# Toolbar

The "[**MatToolbar**](https://v14.material.angular.io/components/toolbar/overview)" is a component provided by Angular Material that serves as a container for various types of content, such as titles, icons, and navigation elements. It is commonly used to create a toolbar at the top of a page for a consistent and organized layout. The `MatToolbar` module is part of the Angular Material library, and it provides styling and layout features to help developers create responsive and visually appealing toolbars in their Angular applications.

Here's a basic example of how you can use the mat-toolbar component in an Angular Material application:

Before writing code in our HTML components, we initially imported and declared the MatChipsModule in "**material.module.ts**".

```typescript
import {MatToolbarModule} from '@angular/material/toolbar';

@NgModule({
  declarations: [
    PillsGridComponent,
    PillItemComponent
  ],
  imports: [
    MatToolbarModule
  ],
  exports: [
    PillsGridComponent,
    PillItemComponent
  ]
})
```

{% code title="collection-player.component" %}

```html
  <mat-toolbar color="primary" class="toolbar-pageback">
    <div class="d-flex flex-ai-center w-below-sm-100 w-above-sm-60">
      <button type="button" mat-mini-fab color="accent"
        class="button-rounded" tabindex="0" (click)="closeCollectionPlayer()"
        attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
        <mat-icon aria-hidden="false" aria-label="Back icon" fontIcon="arrow_back"></mat-icon>
      </button>
      <div class="toolbar-pageback__heading" *ngIf="collectionData">
        <h1 class="mat-title mb-0 sb__ellipsis" tabindex="0" role="heading" aria-level="2">{{collectionData.name}}</h1>
          <div class="toolbar-pageback__metadata">
            <div class="sub-title mat-body-1 mt-4 d-flex flex-ai-center" *ngIf="collectionTreeNodes">
              <span *ngIf="collectionTreeNodes?.data?.board">{{collectionTreeNodes?.data?.board}}</span>
              <span class="dot-divider" *ngIf="collectionTreeNodes?.data?.medium"></span>
              <span *ngIf="collectionTreeNodes?.data?.medium">{{collectionTreeNodes?.data?.medium}}</span>
              <span class="dot-divider" *ngIf="collectionTreeNodes?.data?.gradeLevel"></span>
              <span class="sb__ellipsis whitespace-initial" *ngIf="collectionTreeNodes?.data?.gradeLevel">{{collectionTreeNodes?.data?.gradeLevel}}</span>
            </div>
          </div>
      </div>
    </div>
    <div class="toolbar-pageback__actions" *ngIf="collectionData">
      <button type="button" *ngIf="!isCopyAsCourseClicked" tabindex="0" (click)="onShareLink();sharelinkModal=true;"
      mat-raised-button class="button-rounded mr-8">
      <mat-icon aria-hidden="false" fontIcon="share"></mat-icon> {{resourceService?.frmelmnts?.lbl?.share}}
      </button>
    </div>
  </mat-toolbar>
```

{% endcode %}

And the expected out put is as follows:

<figure><img src="https://174969393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxNCrgHvEtBEHJOGTOcsQ%2Fuploads%2F4zSKpWKyQSzLOFxUHCH3%2Fimage.png?alt=media&amp;token=33cf61bb-c6a8-418d-82bd-9523e90ac9f6" alt=""><figcaption></figcaption></figure>

**Toolbar with Customization styles**

We established a mixin named "**pageback-toolbar**" in "**\_toolbar-pageback.scss**" situated within the "**mat-themes**" folder. Subsequently, this "**\_toolbar-pageback.scss**"  was imported into the "**includes.scss**" file.

{% code title="\_mat-expansion-panel.scss" %}

```scss
@use "@angular/material" as mat;
@use "sass:map";
@forward "./palette";
@forward './buttons';
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;

@mixin pageback-toolbar($theme) {

  // Get the color config from the theme.
  $color-config: mat.get-color-config($theme);
  // Get the primary color palette from the color-config.
  $primary: map.get($color-config, 'primary');
  $accent: map.get($color-config, 'accent');
  $warn: map.get($color-config, 'warn');
  $background: map.get($color-config, 'background');

  .mat-toolbar {
    &.toolbar-pageback {
      border-radius: 1.5rem 1.5rem 0 0;
      display: flex;
      align-items: center;
      margin: 0 auto;
      padding:0.5rem 1rem;
      width: 90%;
      gap: 0.5rem;
      min-height: 4rem;
      height: auto;
      flex-wrap: wrap;
      @include respond-below(sm) {
        flex-wrap: wrap;
        height: auto;
        padding: 1rem;
        width: 100%;
        padding-bottom: 2.5rem;
      }
      .thumbnail {
        height: 3rem;
        width: 3rem;
      }
      .mat-title {
        $title-typography: mat.define-typography-config($subheading-2: mat.define-typography-level($font-size: 1rem !important,
            $font-family: inherit, $line-height: normal,
            $font-weight: 700));
        @include mat.typography-level($title-typography, 'subheading-2');
        margin: 0 0 0.5rem 0;
        color: mat.get-color-from-palette($primary, 500-contrast);
        width: 95%;
        white-space: initial;
      }
      &__actions {
        .sb-label-status-error {
          color: mat.get-color-from-palette($warn);
          font-size: 0.75rem;
          background-color:  mat.get-color-from-palette($warn, 100);
        }
      }
      .mat-flat-button.mat-success,
      .mat-raised-button.mat-success,
      .mat-fab.mat-success,
      .mat-mini-fab.mat-success {
        @extend %mat-success;
      }
    }
  }
}
```

{% endcode %}

{% code title="includes.scss" %}

```scss
@import './toolbar-pageback';
```

{% endcode %}

&#x20;A mixin was crafted and then imported into the "**themes.scss**" file within the "**app-themes**" section.

{% code title="themes.scss" %}

```scss
 @include pageback-toolbar($theme);
```

{% endcode %}

The end result will be as follows in differnt themes:

<figure><img src="https://174969393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxNCrgHvEtBEHJOGTOcsQ%2Fuploads%2FyjKZ5jpyMdShgBPCsUS6%2Fimage.png?alt=media&amp;token=9a125a1c-69a8-4d2a-b485-41cc55e386e4" alt=""><figcaption></figcaption></figure>

<figure><img src="https://174969393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxNCrgHvEtBEHJOGTOcsQ%2Fuploads%2F3ncCeaPu6GZ24q62NhdP%2Fimage.png?alt=media&amp;token=4cb9d208-6bb3-4137-bbc9-8bbe9ba42e9e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://174969393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxNCrgHvEtBEHJOGTOcsQ%2Fuploads%2FeUeKKJXaZ2Wua54WbFpM%2Fimage.png?alt=media&amp;token=0062b10c-1aab-4c82-9e68-86519f32a49d" alt=""><figcaption></figcaption></figure>

Remember to check the official [**Angular Material Toolbar documentation**](https://v14.material.angular.io/components/toolbar/overview) for the latest features and detailed information.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://ed.sunbird.org/release-6.0.0/use/source-code/ui-user-interface-sunbird-ed-portal/angular-material/customazion/components/toolbar.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.