Skip to main content

Footer Component

The Footer component provides a consistent footer layout for applications with navigation links, copyright information, and additional resources. with navigation links, copyright information, and additional resources.

Import​

// Footer component is available in the live scope

Basic Usage​

Live Editor
<Footer
  copyright='© 2025 React SuperAdmin. All rights reserved.'
  links={[
    { href: '/privacy', label: 'Privacy Policy' },
    { href: '/terms', label: 'Terms of Service' },
    { href: '/support', label: 'Support' },
  ]}
/>
Result
Loading...

Props​

| Prop | Type | Default | Description | | ----------------------- | | copyright | string | - | Copyright text | | links | Link[] | [] | Footer navigation links | | socialLinks | SocialLink[] | [] | Social media links | | className | string | - | Additional CSS classes |

Examples​

Live Editor
<Footer
  copyright='© 2025 React SuperAdmin. All rights reserved.'
  links={[
    { href: '/privacy', label: 'Privacy Policy' },
    { href: '/terms', label: 'Terms of Service' },
    { href: '/support', label: 'Support' },
  ]}
/>
Result
Loading...
Live Editor
<Footer
  copyright='© 2025 React SuperAdmin. All rights reserved.'
  links={[
    { href: '/privacy', label: 'Privacy Policy' },
    { href: '/terms', label: 'Terms of Service' },
    { href: '/support', label: 'Support' },
  ]}
  socialLinks={[
    {
  href: 'https://github.com/react-superadmin',
  icon: 'github',
  label: 'GitHub',
    },
    {
  href: 'https://twitter.com/reactsuperadmin',
  icon: 'twitter',
  label: 'Twitter',
    },
    {
  href: 'https://discord.gg/reactsuperadmin',
  icon: 'discord',
  label: 'Discord',
    },
  ]}
/>
Result
Loading...

Custom Styling​

Live Editor
<Footer
  copyright='© 2025 React SuperAdmin. All rights reserved.'
  links={[
    { href: '/privacy', label: 'Privacy Policy' },
    { href: '/terms', label: 'Terms of Service' },
    { href: '/support', label: 'Support' },
  ]}
  className='bg-gray-900 text-white border-t border-gray-800'
/>
Result
Loading...

Accessibility​

The Footer component includes comprehensive accessibility features:

  • Proper ARIA labels and descriptions
  • Semantic HTML structure
  • Keyboard navigation support
  • Screen reader compatibility
<Footer
  copyright='© 2025 React SuperAdmin. All rights reserved.'
  links={footerLinks}
  aria-label='Application footer'
/>

Best Practices​

  1. Keep links relevant - Only include important navigation links
  2. Use descriptive labels - Make link purposes clear
  3. Maintain consistency - Use consistent styling across pages
  4. Test accessibility - Ensure keyboard navigation works