# Footer Compact

> A narrow site footer with a breadcrumb, a collapsible link directory, and legal lines.

A shadcn/ui block from the [@esuiss](https://suiss.app/ui?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/esuiss/footer-compact).

- Page, with a live preview: https://shadcn.exchange/r/esuiss/footer-compact
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/esuiss/footer-compact-light-9bfbc7d0886ca19f.png
- Registry item: https://suiss.app/ui/r/new-york-v4/footer-compact.json
- Categories: blocks, footer
- Listed: 2026-10-20, source last changed 2026-10-20

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/esuiss/footer-compact.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@esuiss/accordion`, `@esuiss/breadcrumb`

## Files

### `bases/radix/components/blocks/footer-compact.tsx`

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

const sections = [
  {
    title: "Explore Products",
    links: ["Store", "Book", "Pad", "Phone", "Watch", "Pods", "Accessories"],
  },
  { title: "Wallet", links: ["Wallet", "suiss Pay"] },
  {
    title: "Account",
    links: ["Manage Your suiss Account", "suiss Store Account", "suiss Cloud"],
  },
  {
    title: "Entertainment",
    links: ["suiss One", "suiss TV", "suiss Music", "App Store"],
  },
  {
    title: "suiss Store",
    links: ["Find a Store", "Help Desk", "Order Status", "Shopping Help"],
  },
  {
    title: "For Business",
    links: ["suiss and Business", "Shop for Business"],
  },
  {
    title: "For Education",
    links: ["suiss and Education", "Shop for University"],
  },
  {
    title: "suiss Values",
    links: ["Accessibility", "Environment", "Privacy", "Supply Chain"],
  },
  {
    title: "About suiss",
    links: ["Newsroom", "Leadership", "Careers", "Investors", "Contact suiss"],
  },
]

const slug = (text: string) =>
  `#${text.toLowerCase().replaceAll(/[^a-z0-9]+/g, "-")}`

export function FooterCompact() {
  return (
    <footer className="bg-muted text-xs text-muted-foreground">
      <div className="mx-auto flex max-w-md flex-col gap-3 px-4 py-5">
        <Breadcrumb className="border-b border-border pb-3">
          <BreadcrumbList className="gap-2 text-xs">
            <BreadcrumbItem>
              <BreadcrumbLink
                href="#home"
                className="font-semibold text-foreground"
              >
                suiss
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="#phone" className="text-foreground">
                Phone
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Phone Pro</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
        <Accordion type="single" collapsible aria-label="Directory">
          {sections.map((section) => (
            <AccordionItem
              key={section.title}
              value={section.title}
              className="ms-0 border-b border-border not-first:border-t-0"
            >
              <AccordionTrigger className="pe-0 text-sm text-foreground hover:no-underline">
                {section.title}
              </AccordionTrigger>
              <AccordionContent className="pe-0 pb-3.5 [&_a]:no-underline [&_a]:hover:underline">
                <ul className="flex flex-col gap-2.5 ps-3">
                  {section.links.map((link) => (
                    <li key={link}>
                      <a href={slug(link)} className="text-sm text-foreground">
                        {link}
                      </a>
                    </li>
                  ))}
                </ul>
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
        <p className="mt-2">
          More ways to shop:{" "}
          <a href="#stores" className="text-primary underline">
            Find a suiss Store near you
          </a>{" "}
          or call <span className="whitespace-nowrap">1-800-555-0199</span>.
        </p>
        <p>Copyright © 2026 suiss Inc. All rights reserved.</p>
        <a href="#region" className="w-fit text-foreground hover:underline">
          United States
        </a>
      </div>
    </footer>
  )
}
```