Blocks

Public Header

The sticky header of public pages: the brand, the links, the language and theme preferences and the actions; below 768px they fold behind a burger.

A block from @tectra-ng/blocks — it comes with tectra-ng, or alone: npm install @tectra-ng/blocks.

Features4

API

Theming

Basic

Links go in txPublicHeaderNav, buttons in txPublicHeaderActions; the language and theme preferences sit between them. Scroll the frame: the header stays on top and the page shows through its glass.

Northwind

Ship reports your team reads

Scroll this frame: the header stays on top and the content shows through its glass.

Dashboards

Ready in a minute

Alerts

Ready in a minute

Exports

Ready in a minute

Sharing

Ready in a minute

Schedules

Ready in a minute

Comments

Ready in a minute

Goals

Ready in a minute

Forecasts

Ready in a minute

Audit log

Ready in a minute

22 lines

<div class="screen">  <tx-public-header brand="Northwind" logo="/favicon.svg">    <nav txPublicHeaderNav aria-label="Main">      <a routerLink="." [queryParams]="{ section: 'features' }">Features</a>      <a routerLink="." [queryParams]="{ section: 'pricing' }">Pricing</a>      <a routerLink="." [queryParams]="{ section: 'docs' }">Docs</a>    </nav>    <div txPublicHeaderActions>      <button txButton text severity="secondary">Sign in</button>      <button txButton>Get started</button>    </div>  </tx-public-header>  <main class="page">    <h2>Ship reports your team reads</h2>    <p>Scroll this frame: the header stays on top and the content shows through its glass.</p>    <div class="cards">      @for (card of cards; track card) {        <tx-card [title]="card" subtitle="Ready in a minute" />      }    </div>  </main></div>

Responsive

responsive="container" makes the header follow its own width instead of the window — here the device frame. Below 768px a burger opens a panel with the links, the preferences as labelled rows and full-width buttons; it closes on a link, on Escape and when the header grows wide again.

Phone

Tablet

Desktop

Northwind

Open the menu on the phone: the links, the preferences and the buttons move into a panel.

25 lines

<tx-tabs  class="variants"  variant="pills"  ariaLabel="Device"  [tabs]="devices"  [(value)]="device"/><div class="stage">  <div class="screen" [style.width]="width()">    <tx-public-header brand="Northwind" logo="/favicon.svg" responsive="container">      <nav txPublicHeaderNav aria-label="Main">        <a routerLink="." [queryParams]="{ section: 'features' }">Features</a>        <a routerLink="." [queryParams]="{ section: 'pricing' }">Pricing</a>        <a routerLink="." [queryParams]="{ section: 'docs' }">Docs</a>      </nav>      <div txPublicHeaderActions>        <button txButton text severity="secondary">Sign in</button>        <button txButton>Get started</button>      </div>    </tx-public-header>    <p class="page">      Open the menu on the phone: the links, the preferences and the buttons move into a panel.    </p>  </div></div>

Without preferences

[preferences]="false" hides the language and theme preferences; without logo the brand is just the name.

Northwind

7 lines

<div class="screen">  <tx-public-header brand="Northwind" [preferences]="false">    <div txPublicHeaderActions>      <button txButton severity="secondary" outlined>Contact sales</button>    </div>  </tx-public-header></div>

Design tokens

dt changes the tokens of one header: here taller, on the ground colour, with larger dark links.

Northwind

16 lines

<div class="screen">  <tx-public-header    brand="Northwind"    logo="/favicon.svg"    [preferences]="false"    [dt]="{      root: { height: '68px', background: 'var(--tx-surface-ground)' },      nav: { linkFontSize: '14px', linkColor: 'var(--tx-text-primary)' },    }"  >    <nav txPublicHeaderNav aria-label="Main">      <a routerLink="." [queryParams]="{ section: 'blog' }">Blog</a>      <a routerLink="." [queryParams]="{ section: 'about' }">About</a>    </nav>  </tx-public-header></div>