Footer Compact

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

const sections = [

A narrow footer for mobile-first sites: a breadcrumb for the current page, a collapsible directory of link sections and legal lines at the bottom. It keeps the same single-column layout at every width. As a server component with no state, it drops into any layout.

Installation

CLI

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

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-compact

Manual

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

2. Copy the source into components/blocks/footer-compact.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 { FooterCompact } from "@/components/blocks/footer-compact"

<FooterCompact />

Edit sections for the directory titles and links. URLs are hash anchors generated by the slug helper, so map them to your real routes. The breadcrumb trail, phone number, copyright and region link are inline.