# Footer Compact

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

Footer Compact is an open-source block from suiss/ui for React. The @esuiss/ui CLI copies its source into your project, so you own the code.

Source: https://ui.suiss.app/docs/blocks/footer-compact

**React**

**Example**

```tsx title="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 = [
  {
    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 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>
  )
}
```

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

```bash title="Terminal"
npx shadcn@latest add @esuiss/footer-compact
```

Works in any project with a `components.json`. See [Installation](https://ui.suiss.app/docs/installation#add-components) for the one-line registry setup. Or use the suiss/ui CLI:

```bash title="Terminal"
npx @esuiss/ui@latest add blocks footer-compact
```

### Manual

1. Add the pieces it builds on: [Accordion](https://ui.suiss.app/docs/components/accordion), [Breadcrumb](https://ui.suiss.app/docs/components/breadcrumb).

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

```tsx title="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 = [
  {
    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 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>
  )
}
```

3. Update the import paths to match your project.

## Usage

```tsx
import { FooterCompact } from "@/components/blocks/footer-compact"
```

```tsx
<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.