# Toolbar

O componente de toolbar permite incluir um título para a página, breadcrumb e um content para botões.

### Uso

{% hint style="info" %}
**Importante**

Este componente trabalha em conjunto com o [Sidenav](/menu/sidenav.md), onde as configurações definidas lá, serão automaticamente convertidas e disponibilizadas na classe abstrata [**CatComponentBase** ](/abstracoes/componentbase.md)pelo método **getToolbarInfo**.

Para subpáginas em que não foram configuradas no [Sidenav](/menu/sidenav.md), será convertido automaticamente através do texto na url.

*Caso não queira utilizar o componente de menu nativo do Cat UI, também será permitido configurar manualmente através do serviço **CatToolbarService** pelo método **build.***
{% endhint %}

{% code title="page-toolbar.component.ts" lineNumbers="true" %}

```typescript
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CatComponentBase } from '@catrx/ui';

@Component({
  templateUrl: './page-toolbar.component.html'
})
export class PageToolbarComponent extends CatComponentBase implements OnInit {
  isSubpage: boolean;

  constructor(private activatedRoute: ActivatedRoute) {
    super();
  }

  ngOnInit(): void {
    this.activatedRoute.paramMap.subscribe(map => {
      this.isSubpage = !!map?.['params']?.['subpage'];
    })
  }
}

```

{% endcode %}

{% code title="page-toolbar.component.html" lineNumbers="true" %}

```html
<cat-toolbar [config]="getToolbarInfo()">
  <nav buttons>
    <button *ngIf="!isSubpage" class="btn btn-primary btn-sm" routerLink="./sub-pagina">Ir para Subpágina</button>
  </nav>
</cat-toolbar>
```

{% endcode %}

{% code title="page-toolbar.routing.module.ts" lineNumbers="true" %}

```typescript
import { Routes, RouterModule } from '@angular/router';
import { PageToolbarComponent } from './page-toolbar.component';
import { NgModule } from '@angular/core';

const routes: Routes = [
  { path: '', component: PageToolbarComponent },
  { path: ':subpage', component: PageToolbarComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PageToolbarRoutingModule {}
```

{% endcode %}

{% code title="page-toolbar.module.ts" lineNumbers="true" %}

```typescript
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { CatToolbarModule } from '@catrx/ui/toolbar';
import { PageToolbarComponent } from './page-toolbar.component';
import { PageToolbarRoutingModule } from './page.toolbar.routing.module';

@NgModule({
  declarations: [PageToolbarComponent],
  imports: [CommonModule, CatToolbarModule, PageToolbarRoutingModule],
})
export class PageToolbarModule {}
```

{% endcode %}

### Overview

{% embed url="<https://cat-ui.igordrangel.com.br/components/toolbar>" %}


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.catui.igordrangel.com.br/menu/toolbar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.