# Footer Section 6

> A minimal two-row footer with top navigation, a language menu and city links

A shadcn/ui block from the [@shadcnstore](https://www.shadcnstore.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnstore/footer-section-6).

- Page, with a live preview: https://shadcn.exchange/r/shadcnstore/footer-section-6
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnstore/footer-section-6-light-e9de86662d55e17b.png
- Registry item: https://shadcnstore.com/r/footer-section-6.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstore.com/r/footer-section-6.json
```

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

## Dependencies

- npm packages: `lucide-react`
- Registry items: `button`, `dropdown-menu`

## Files

### `storage/app/registry-sources/marketing/footer-sections/footer-section-6/page.tsx`

```tsx
import { FooterSection6 } from "@/components/blocks/marketing/footer-sections/footer-section-6/components/footer-section-6"

export default function Page() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center">
      <div className="w-full">
        <FooterSection6 />
      </div>
    </div>
  )
}
```

### `storage/app/registry-sources/marketing/footer-sections/footer-section-6/footer-section-6.tsx`

```tsx

'use client'

import { Globe } from 'lucide-react'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import { cities, navLinks, socialLinks } from "@/components/data/footer-section-6-data"

export function FooterSection6() {
  return (
    <footer className='w-full'>
      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
        {/* Top Navigation */}
        <nav className='flex flex-col items-center justify-between gap-6 border-b py-8 md:flex-row md:py-10'>
          <div className='flex flex-wrap justify-center gap-x-8 gap-y-4'>
            {navLinks.map(item => (
              <a
                key={item}
                href='#'
                onClick={(e) => { e.preventDefault() }}
                className='text-foreground/80 hover:text-foreground relative font-medium transition-colors'
                aria-label={item}
              >
                {item}
                <span className='bg-foreground absolute start-0 -bottom-1 h-0.5 w-0 transition-all group-hover:w-full' />
              </a>
            ))}
          </div>

          <DropdownMenu>
            <DropdownMenuTrigger
              render={
                <Button
                  variant='outline'
                  className='group flex cursor-pointer items-center gap-2 rounded-full px-4 py-2'
                  aria-label='Select language'
                />
              }
            >
              <Globe className='size-4 transition-transform group-hover:rotate-180' />
              <span>Select Language</span>
            </DropdownMenuTrigger>
            <DropdownMenuContent align='end' className='w-40'>
              <DropdownMenuItem>English</DropdownMenuItem>
              <DropdownMenuItem>Español</DropdownMenuItem>
              <DropdownMenuItem>Français</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </nav>

        {/* Bottom Section */}
        <div className='flex flex-col items-center justify-between gap-6 py-8 text-sm lg:flex-row'>
          <div className='mb-2 md:mb-0'>
            <span className='text-muted-foreground me-2'>&copy;{new Date().getFullYear()}</span>
            <span className='text-foreground font-bold tracking-wider'>ShadcnStore</span>
          </div>

          <nav className='flex flex-wrap items-center justify-center gap-x-8 gap-y-2'>
            {cities.map(city => (
              <a
                key={city}
                href='#'
                onClick={(e) => { e.preventDefault() }}
                className='text-muted-foreground hover:text-foreground transition-colors'
                aria-label={`Visit our ${city} location`}
              >
                {city}
              </a>
            ))}
          </nav>
          <div className='flex flex-wrap items-center justify-center gap-6 md:justify-end'>
            {socialLinks.map(({ Icon, label }) => (
              <a
                href='#'
                onClick={(e) => { e.preventDefault() }}
                key={label}
                className={cn(
                  'group bg-muted relative flex size-10 items-center justify-center rounded-full p-2 transition-colors',
                  'hover:bg-muted/80',
                )}
              >
                <Icon className={cn('text-muted-foreground group-hover:text-foreground size-5 transition-colors')} />
                <span className='sr-only'>{label}</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  )
}

export default FooterSection6
```

### `storage/app/registry-sources/marketing/footer-sections/footer-section-6/footer-section-6-data.tsx`

```tsx
import type { SVGProps } from 'react'

const Twitter = (props: SVGProps<SVGSVGElement>) => (
  <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' {...props}>
    <path d='M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z' />
  </svg>
)

const Instagram = (props: SVGProps<SVGSVGElement>) => (
  <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' {...props}>
    <rect width='20' height='20' x='2' y='2' rx='5' ry='5' />
    <path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z' />
    <line x1='17.5' y1='6.5' x2='17.51' y2='6.5' />
  </svg>
)

const Youtube = (props: SVGProps<SVGSVGElement>) => (
  <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' {...props}>
    <path d='M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17' />
    <path d='m10 15 5-3-5-3z' />
  </svg>
)

const Facebook = (props: SVGProps<SVGSVGElement>) => (
  <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' {...props}>
    <path d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z' />
  </svg>
)

const Twitch = (props: SVGProps<SVGSVGElement>) => (
  <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' {...props}>
    <path d='M21 2H3v16h5v4l4-4h5l4-4V2z' />
    <path d='M11 7v5M16 7v5' />
  </svg>
)

export const socialLinks = [
  { Icon: Twitter, label: 'Twitter' },
  { Icon: Instagram, label: 'Instagram' },
  { Icon: Youtube, label: 'YouTube' },
  { Icon: Facebook, label: 'Facebook' },
  { Icon: Twitch, label: 'Twitch' },
] as const

export const navLinks = ['Contact', 'Careers', 'Community Guidelines', 'Subscribe'] as const

export const cities = ['New York', 'London', 'Paris', 'Bogotá'] as const
```