| title | description | lastUpdated |
|---|---|---|
Footer Customization |
Configure and customize the footer structure and content for your Bordful job board. |
2025-05-22 |
Bordful's footer is fully customizable to match your branding and provide users with important links and information about your job board.
- Multi-column layout with customizable sections
- Company/brand information display
- Configurable link columns for navigation, resources, and legal
- Bottom bar with copyright notice and optional social icons
- Mobile-responsive design that adjusts for various screen sizes
- Configurable via a single configuration file
The footer is configured in the footer section of your config/config.ts file:
footer: {
// Company/brand information
brand: {
name: "Your Company", // Company name in footer
description: "Brief description of your company or job board", // Short tagline
showLogo: true, // Whether to show the logo in footer
},
// Footer columns
columns: [
{
title: "Navigation",
links: [
{ label: "Home", href: "/" },
{ label: "Jobs", href: "/jobs" },
{ label: "About", href: "/about" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Resources",
links: [
{ label: "FAQ", href: "/faq" },
{ label: "Job Alerts", href: "/job-alerts" },
{ label: "RSS Feed", href: "/feed.xml" },
{ label: "Pricing", href: "/pricing" },
],
},
{
title: "Legal",
links: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Cookies", href: "/cookies" },
],
},
],
// Bottom bar with copyright and additional links
bottom: {
copyright: "© 2025 Your Company. All rights reserved.",
links: [
{ label: "Privacy", href: "/privacy" },
{ label: "Terms", href: "/terms" },
],
showSocialIcons: true, // Whether to show social icons in footer
},
}The top section of the footer can display your company or job board brand information:
brand: {
name: "Your Company", // Company name in footer
description: "Brief description of your company or job board", // Short tagline
showLogo: true, // Whether to show the logo in footer
}If showLogo is set to true, the footer will display the same logo as configured in the navigation section. If you're using icon+text in the navigation, the footer will display the icon.
The main section of the footer consists of multiple columns, each with a title and a list of links:
columns: [
{
title: "Navigation",
links: [
{ label: "Home", href: "/" },
{ label: "Jobs", href: "/jobs" },
{ label: "About", href: "/about" },
{ label: "Contact", href: "/contact" },
],
},
// Add more columns as needed
]You can add as many columns as you need, but for optimal mobile display, we recommend 2-4 columns.
While you can name your columns anything you want, here are some common column types:
- Navigation: Main site navigation links
- Resources: Helpful resources for job seekers
- For Employers: Links relevant to employers
- Legal: Privacy policy, terms of service, etc.
- Contact: Contact information and social links
The bottom bar of the footer contains copyright information and optional additional links:
bottom: {
copyright: "© 2025 Your Company. All rights reserved.",
links: [
{ label: "Privacy", href: "/privacy" },
{ label: "Terms", href: "/terms" },
],
showSocialIcons: true, // Whether to show social icons in footer
}If showSocialIcons is set to true, the social media icons configured in the navigation section will also appear in the footer's bottom bar.
The footer automatically adapts to different screen sizes:
- Desktop: Multi-column layout with brand information at the top
- Tablet: Columns may reduce or stack depending on screen width
- Mobile: Stacked columns with appropriate spacing
No additional configuration is required for mobile support.
footer: {
brand: {
name: "JobBoard",
description: "",
showLogo: false,
},
columns: [
{
title: "Links",
links: [
{ label: "Home", href: "/" },
{ label: "Jobs", href: "/jobs" },
{ label: "Privacy", href: "/privacy" },
{ label: "Terms", href: "/terms" },
],
},
],
bottom: {
copyright: "© 2025 JobBoard. All rights reserved.",
links: [],
showSocialIcons: false,
},
}footer: {
brand: {
name: "Enterprise Corp",
description: "Leading provider of enterprise job solutions since 2010",
showLogo: true,
},
columns: [
{
title: "Our Products",
links: [
{ label: "Job Board", href: "/" },
{ label: "Applicant Tracking", href: "/ats" },
{ label: "Resume Parser", href: "/parser" },
{ label: "API Access", href: "/api" },
],
},
{
title: "Resources",
links: [
{ label: "Documentation", href: "/docs" },
{ label: "Pricing", href: "/pricing" },
{ label: "Blog", href: "/blog" },
{ label: "Support", href: "/support" },
],
},
{
title: "Company",
links: [
{ label: "About Us", href: "/about" },
{ label: "Careers", href: "/careers" },
{ label: "Contact", href: "/contact" },
{ label: "Press", href: "/press" },
],
},
{
title: "Legal",
links: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Cookie Policy", href: "/cookies" },
{ label: "GDPR", href: "/gdpr" },
],
},
],
bottom: {
copyright: "© 2025 Enterprise Corp. All rights reserved.",
links: [
{ label: "Privacy", href: "/privacy" },
{ label: "Terms", href: "/terms" },
],
showSocialIcons: true,
},
}- Consistent Navigation: Ensure footer links are consistent with top navigation
- Logical Grouping: Group related links into clearly labeled columns
- Concise Labels: Keep link labels short and descriptive
- Accessibility: Ensure sufficient color contrast for footer text
- Completeness: Include all essential legal and informational links
The footer is implemented in components/ui/footer.tsx, which reads the configuration from config/config.ts and renders the appropriate structure.