UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Header

blockmarketing
Boilerplate repo

Site header collection: sticky top bar, dismissible announcement stack, centered-logo split, floating pill, full-width mega menu, inline search with command palette, and a transparent-over-hero scroll variant — each with a mobile sheet fallback.

Installation

$npx uipkge-ng@latest add header
Manifest:https://uipkge.dev/r/angular/header.jsonInstalls to:src/app/components/blocks/header/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

MegaItem
interface MegaItem {
  icon: LucideIconData
  title: string
  body: string
}
MegaGroup
interface MegaGroup {
  heading: string
  items: MegaItem[]
}
MegaMenu
interface MegaMenu {
  label: string
  groups: MegaGroup[]
  highlight: { title: string; body: string; cta: string }
}
SearchGroup
interface SearchGroup {
  heading: string
  items: { icon: LucideIconData; label: string }[]
}

npm dependencies

lucide-angular

Files installed (8)

  • src/app/components/blocks/header/header-01.component.ts4.2 kB
    // Sticky marketing top nav. Brand + 5 links + sign-in/CTA on desktop, hamburger +
// right-side Sheet on mobile. Port of the React block 1:1.
import { ChangeDetectionStrategy, Component, signal } from '@angular/core'
import { Boxes, LucideAngularModule, Menu, X } from 'lucide-angular'
import { UiButtonComponent } from '@/ui/button/button.component'
import { UiSheetCloseComponent, UiSheetComponent, UiSheetContentComponent } from '@/ui/sheet/sheet.component'

const links = [
  { label: 'Features', href: '#features' },
  { label: 'Pricing', href: '#pricing' },
  { label: 'Customers', href: '#customers' },
  { label: 'Docs', href: '#docs' },
  { label: 'Blog', href: '#blog' },
]

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-header-01, [ui-header-01]',
  standalone: true,
  host: { '[attr.class]': '"contents"' },
  imports: [LucideAngularModule, UiButtonComponent, UiSheetCloseComponent, UiSheetComponent, UiSheetContentComponent],
  template: `
    <header
      data-slot="header-01"
      class="bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-40 border-b backdrop-blur"
    >
      <div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
        <a href="#" class="flex items-center gap-2">
          <div class="bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md">
            <lucide-icon [img]="Boxes" class="size-4" />
          </div>
          <span class="text-base font-semibold">Acme</span>
        </a>
        <nav class="hidden items-center gap-6 md:flex" aria-label="Primary">
          @for (link of links; track link.href) {
            <a [href]="link.href" class="text-muted-foreground hover:text-foreground text-sm transition-colors">{{
              link.label
            }}</a>
          }
        </nav>
        <div class="hidden items-center gap-2 md:flex">
          <button ui-button variant="ghost" size="sm">Sign in</button>
          <button ui-button size="sm">Start free trial</button>
        </div>
        <div ui-sheet [open]="mobileOpen()" (openChange)="mobileOpen.set($event)">
          <button
            ui-button
            variant="ghost"
            size="icon"
            class="md:hidden"
            aria-label="Open menu"
            (click)="mobileOpen.set(true)"
          >
            <lucide-icon [img]="Menu" class="size-5" />
          </button>
          <div ui-sheet-content side="right" class="w-72">
            <div class="flex h-full flex-col">
              <div class="flex items-center justify-between border-b px-4 py-3">
                <div class="flex items-center gap-2">
                  <div class="bg-primary text-primary-foreground flex size-7 items-center justify-center rounded-md">
                    <lucide-icon [img]="Boxes" class="size-3.5" />
                  </div>
                  <span class="text-sm font-semibold">Acme</span>
                </div>
                <button
                  ui-button
                  variant="ghost"
                  size="icon"
                  class="size-8"
                  aria-label="Close menu"
                  (click)="mobileOpen.set(false)"
                >
                  <lucide-icon [img]="X" class="size-4" />
                </button>
              </div>
              <nav class="flex flex-1 flex-col gap-1 p-4" aria-label="Mobile">
                @for (link of links; track link.href) {
                  <a
                    [href]="link.href"
                    class="hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors"
                    (click)="mobileOpen.set(false)"
                    >{{ link.label }}</a
                  >
                }
              </nav>
              <div class="flex flex-col gap-2 border-t p-4">
                <button ui-button variant="outline" class="w-full">Sign in</button>
                <button ui-button class="w-full">Start free trial</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  `,
})
export class UiHeader01Component {
  protected readonly Boxes = Boxes
  protected readonly Menu = Menu
  protected readonly X = X
  protected readonly links = links
  readonly mobileOpen = signal(false)
}
  • src/app/components/blocks/header/header-announcement-stack.component.ts5.4 kB
  • src/app/components/blocks/header/header-centered-logo.component.ts4.3 kB
  • src/app/components/blocks/header/header-floating-pill.component.ts4.4 kB
  • src/app/components/blocks/header/header-mega-menu.component.ts10.5 kB
  • src/app/components/blocks/header/header-search-command.component.ts6.3 kB
  • src/app/components/blocks/header/header-transparent-scroll.component.ts4 kB
  • src/app/components/blocks/header/index.ts0.5 kB

Raw manifest:https://uipkge.dev/r/angular/header.json