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
`navClass`	`string`	`''`	Extra CSS classes applied to the inner `<nav>` element

Slot	Description
`[toolbarStart]`	Left-aligned content (logo, brand, hamburger)
`[toolbarCenter]`	Truly centered content (nav links, search, title)
default	Free-form content rendered inside the start region
`[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 toolbarCenter class="flex flex-wrap items-center gap-3">Links</nav>
      <button toolbarEnd>Actions</button>
    </ng-oat-toolbar>
  `,
})
export class MyComponent {}

App Toolbar

A production application header with responsive start, brand, title, and action slots. Its dimensions and colors are controlled by --ng-oat-app-toolbar-* tokens.

html

import { NgOatAppToolbar } from '@letsprogram/ng-oat/app-toolbar';

<ng-oat-app-toolbar title="Workspace">
  <button appToolbarStart type="button" aria-label="Open navigation">Menu</button>
  <strong appToolbarBrand>Acme</strong>
  <div appToolbarEnd>Actions</div>
</ng-oat-app-toolbar>

Basic Toolbar

html

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

With Center Slot & User Menu

html

<ng-oat-toolbar>
  <strong toolbarStart><ng-oat-icon [icon]="iconRocket" size="18" /> Dashboard</strong>
  <nav toolbarCenter class="flex flex-wrap items-center gap-3">
    <a routerLink="/projects">Projects</a>
    <a routerLink="/analytics">Analytics</a>
    <a routerLink="/settings">Settings</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>

Custom Nav Styling (navClass)

html

<!-- navClass forwards CSS classes to the inner <nav data-topnav> element -->
<ng-oat-toolbar navClass="px-8">
  <strong toolbarStart>🌾 MyApp</strong>
  <span toolbarCenter>Centered title</span>
  <button toolbarEnd class="ghost">Actions</button>
</ng-oat-toolbar>

Primary Color

html

<ng-oat-toolbar color="primary">
  <strong toolbarStart><ng-oat-icon [icon]="iconPalette" size="18" /> Themed</strong>
  <span toolbarCenter>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 toolbarCenter>A shorter, denser toolbar</span>
</ng-oat-toolbar>