Footer — Dense Sitemap

Installation

Variants

Schema

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

interface SitemapDenseSection {
  heading: string
  links: string[]
}

Files installed (2)

• src/app/components/blocks/footer-sitemap-dense/footer-sitemap-dense.component.ts5.9 kB

  Copy

  // Sitemap-style footer with six tightly-set link columns, a region and currency
  // selector row, compliance marks, and a status indicator reporting live uptime.
  // Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'
  import { Github, Layers, Linkedin, LucideAngularModule } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import {
    UiSelectComponent,
    UiSelectContentComponent,
    UiSelectItemComponent,
    UiSelectTriggerComponent,
    UiSelectValueComponent,
  } from '@/ui/select/select.component'
  import { UiSeparatorComponent } from '@/ui/separator/separator.component'
  
  interface SitemapDenseSection {
    heading: string
    links: string[]
  }
  
  const sections: SitemapDenseSection[] = [
    { heading: 'Platform', links: ['Metric layer', 'Dashboards', 'Alerting', 'Embedding', 'API', 'CLI'] },
    { heading: 'Solutions', links: ['Finance', 'RevOps', 'Analytics', 'Engineering', 'Healthcare', 'Retail'] },
    { heading: 'Developers', links: ['Documentation', 'API reference', 'SDKs', 'Webhooks', 'Status', 'Changelog'] },
    { heading: 'Resources', links: ['Guides', 'Benchmarks', 'Customers', 'Blog', 'Webinars', 'Glossary'] },
    { heading: 'Company', links: ['About', 'Careers', 'Press kit', 'Partners', 'Contact', 'Security'] },
    { heading: 'Legal', links: ['Privacy', 'Terms', 'DPA', 'Subprocessors', 'SLA', 'Accessibility'] },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-footer-sitemap-dense, [ui-footer-sitemap-dense]',
    standalone: true,
    // React renders the root <footer> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [
      LucideAngularModule,
      UiBadgeComponent,
      UiButtonComponent,
      UiSelectComponent,
      UiSelectContentComponent,
      UiSelectItemComponent,
      UiSelectTriggerComponent,
      UiSelectValueComponent,
      UiSeparatorComponent,
    ],
    template: `
      <footer data-slot="footer-sitemap-dense" [class]="rootClass">
        <div class="mx-auto max-w-6xl px-6 py-12">
          <div class="grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-6">
            @for (section of sectionList; track section.heading) {
              <div>
                <p class="text-muted-foreground/70 text-xs font-medium tracking-wide uppercase">{{ section.heading }}</p>
                <ul class="mt-3 space-y-1.5">
                  @for (link of section.links; track link) {
                    <li>
                      <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">
                        {{ link }}
                      </a>
                    </li>
                  }
                </ul>
              </div>
            }
          </div>
  
          <div ui-separator class="my-10"></div>
  
          <div class="flex flex-col gap-6 lg:flex-row lg:items-center">
            <a href="#top" class="flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight">
              <lucide-icon [img]="Layers" class="text-primary size-4" aria-hidden="true" />
              Northwind
            </a>
  
            <div class="flex flex-wrap items-center gap-2">
              <ui-select [value]="region()" (valueChange)="region.set($event)">
                <button ui-select-trigger class="h-8 w-40 text-xs" aria-label="Data region">
                  <ui-select-value />
                </button>
                <ui-select-content>
                  <ui-select-item value="eu">EU (Frankfurt)</ui-select-item>
                  <ui-select-item value="us">US (Virginia)</ui-select-item>
                  <ui-select-item value="au">AU (Sydney)</ui-select-item>
                </ui-select-content>
              </ui-select>
  
              <ui-select [value]="currency()" (valueChange)="currency.set($event)">
                <button ui-select-trigger class="h-8 w-28 text-xs" aria-label="Currency">
                  <ui-select-value />
                </button>
                <ui-select-content>
                  <ui-select-item value="eur">EUR €</ui-select-item>
                  <ui-select-item value="usd">USD $</ui-select-item>
                  <ui-select-item value="gbp">GBP £</ui-select-item>
                </ui-select-content>
              </ui-select>
            </div>
  
            <div class="flex flex-wrap items-center gap-3 lg:ml-auto">
              <!-- Status dot is a live indicator, so it carries its own text for
                   screen readers rather than relying on colour alone. -->
              <a href="#status" class="hover:bg-muted flex items-center gap-2 rounded-md px-2 py-1 transition-colors">
                <span class="bg-success size-2 rounded-full" aria-hidden="true"></span>
                <span class="text-muted-foreground text-xs">All systems operational</span>
              </a>
              <span ui-badge variant="outline">SOC 2</span>
              <span ui-badge variant="outline">GDPR</span>
              <button ui-button variant="ghost" size="icon" class="size-8" aria-label="GitHub">
                <lucide-icon [img]="Github" class="size-4" aria-hidden="true" />
              </button>
              <button ui-button variant="ghost" size="icon" class="size-8" aria-label="LinkedIn">
                <lucide-icon [img]="Linkedin" class="size-4" aria-hidden="true" />
              </button>
            </div>
          </div>
  
          <p class="text-muted-foreground mt-6 text-xs">© 2026 Northwind Data, Inc. All rights reserved.</p>
        </div>
      </footer>
    `,
  })
  export class UiFooterSitemapDenseComponent {
    protected readonly Github = Github
    protected readonly Layers = Layers
    protected readonly Linkedin = Linkedin
  
    protected readonly sectionList = sections
  
    readonly region = signal('eu')
    readonly currency = signal('eur')
  
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('border-border bg-background border-t', this.className)
    }
  }
  

• src/app/components/blocks/footer-sitemap-dense/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/footer-sitemap-dense.json