Toolbar

Name: ng-oat
Author: SashiKumar Yadav

Application toolbar for top-level navigation. Like Angular Material's mat-toolbar, it uses content projection with named slots for brand, navigation links, and actions.

Input	Type	Default	Description
`color`	`'default' \| 'primary' \| 'accent'`	`'default'`	Bar color variant
`dense`	`boolean`	`false`	Compact height
`fixed`	`boolean`	`true`	Fix to viewport top

Slot	Description
`[toolbarStart]`	Left-aligned content (logo, brand, hamburger)
default	Center / free-form content (nav links, search)
`[toolbarEnd]`	Right-aligned content (user menu, theme toggle, actions)

Import

typescript

import { NgOatToolbar, NgOatToolbarRow } from '@letsprogram/ng-oat/toolbar';

@Component({
  imports: [NgOatToolbar, NgOatToolbarRow],
  template: `
    <ng-oat-toolbar>
      <strong toolbarStart>🌾 Brand</strong>
      <nav>Links</nav>
      <button toolbarEnd>Actions</button>
    </ng-oat-toolbar>
  `,
})
export class MyComponent {}

Basic Toolbar

html

<ng-oat-toolbar>
  <strong toolbarStart>🌾 MyApp</strong>
  <nav class="hstack gap-3">
    <a routerLink="/home">Home</a>
    <a routerLink="/about">About</a>
    <a routerLink="/contact">Contact</a>
  </nav>
  <span toolbarEnd class="hstack gap-2">
    <ng-oat-theme-selector />
    <button class="ghost"><ng-oat-icon [icon]="iconUser" size="18" /></button>
  </span>
</ng-oat-toolbar>

With User Menu

html

<ng-oat-toolbar>
  <strong toolbarStart><ng-oat-icon [icon]="iconRocket" size="18" /> Dashboard</strong>
  <nav class="hstack gap-3">
    <a routerLink="/projects">Projects</a>
    <a routerLink="/analytics">Analytics</a>
  </nav>
  <ng-oat-dropdown toolbarEnd>
    <button trigger class="ghost"><ng-oat-icon [icon]="iconUser" size="16" /> Jane <ng-oat-icon [icon]="iconChevronDown" size="14" /></button>
    <a role="menuitem">Profile</a>
    <a role="menuitem">Settings</a>
    <hr />
    <a role="menuitem">Log out</a>
  </ng-oat-dropdown>
</ng-oat-toolbar>

Primary Color

html

<ng-oat-toolbar color="primary">
  <strong toolbarStart><ng-oat-icon [icon]="iconPalette" size="18" /> Themed</strong>
  <span>Primary toolbar with accent background</span>
  <button toolbarEnd class="ghost">Actions</button>
</ng-oat-toolbar>

Dense

html

<ng-oat-toolbar [dense]="true">
  <strong toolbarStart><ng-oat-icon [icon]="iconRuler2" size="18" /> Compact</strong>
  <span>A shorter, denser toolbar</span>
</ng-oat-toolbar>