Footer Directory

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

const sections = [

A full site footer with numbered footnotes, a breadcrumb, a five-column link directory and a legal row with copyright and region links. On mobile the directory collapses into an accordion so the footer stays short. It is a server component with no state, suited to large marketing or store sites.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/footer-directory

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add blocks footer-directory

Manual

1. Add the pieces it builds on: Accordion, Breadcrumb.

2. Copy the source into components/blocks/footer-directory.tsx:

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

const sections = [

3. Update the import paths to match your project.

Usage

import { FooterDirectory } from "@/components/blocks/footer-directory"

<FooterDirectory />

Edit sections for the directory, columns for which sections share each desktop column, and legal for the bottom links. Links are hash anchors from the slug helper, so swap it for your routing. Footnotes, the breadcrumb, phone number and copyright are inline.