Navigation
Glass Header
A floating top bar that condenses as you scroll and folds its links into a menu on small screens.
Preview
Installation
Install the package once, then import the parts you use into a standalone component.
Install
npm install ngx-vitreo @angular/cdk @floating-ui/domImport
import { GlassHeader } from 'ngx-vitreo';
@Component({
imports: [GlassHeader],
// ...
})Usage
Usage
<header glassHeader navigationLabel="Example navigation" position="static">
<a glassHeaderBrand href="#acme" (click)="follow($event, 'Acme')">Acme</a>
<ng-template glassHeaderLinks>
<a href="#components" (click)="follow($event, 'Components')">Components</a>
<a href="#docs" (click)="follow($event, 'Docs')">Docs</a>
<a href="#guides" (click)="follow($event, 'Guides')">Guides</a>
</ng-template>
<a glassButton glassHeaderActions href="#start" size="sm" variant="prominent" (click)="follow($event, 'Start')">
Start
</a>
</header>API reference
GlassHeader
header[glassHeader], glass-header
| Input | Type | Default | Description |
|---|---|---|---|
[glassHeaderBrand] | content | None | Logo or wordmark, usually linked to the home page. |
ng-template[glassHeaderLinks] | content | None | Navigation links. They render twice, in the inline nav and in the Menu used below 780px of header width, so avoid ids inside them. |
[glassHeaderActions] | content | None | Buttons or links at the end, shown at every width. Put it on one element or an ng-container around several. |
position | 'fixed' | 'static' | 'fixed' | fixed floats 14px from the top (8px on narrow screens) and needs about 84px of room above your content; static stays in the layout. |
condenseOnScroll | boolean | false | Starts as a full-width bar without glass and condenses into the capsule after 8px of scroll. Fixed headers only. |
navigationLabel | string | 'Primary' | Accessible name for both navs. |