Footer Menus

Defines the links in the website footer, each item is MenuItemConfig.

src/config/footer-config.ts

export function getFooterLinks(): MenuItemConfig[] {
  const productItems: MenuItemConfig[] = [];
  productItems.push({
    title: m.features,
    href: Routes.Features,
    external: false,
  });
  if (websiteConfig.payment?.enable) {
    productItems.push({
      title: m.pricing,
      href: Routes.Pricing,
      external: false,
    });
  }
  productItems.push({
    title: m.faq,
    href: Routes.Faqs,
    external: false,
  });

  // More sections: resources, company, legal...

  return [
    { title: m.product, items: productItems },
    { title: m.resources, items: resourcesItems },
    { title: m.company, items: companyItems },
    { title: m.legal, items: legalItems },
  ];
}

Footer links are organized in four columns: Product, Resources, Company, and Legal. Each column has a title and a list of links. Links are conditionally shown based on feature flags (e.g., payment.enable, blog.enable).

Footer

Next Steps

Now that you understand the footer configuration, explore these related topics:

Website Configuration

Configure core settings for your TanStarter website

Navbar Configuration

Configure the navigation menu in the header

Social Configuration

Configure social media links

Sidebar Configuration

Configure the navigation menu for dashboard

Defines the links in the website footer, each item is MenuItemConfig.

src/config/footer-config.ts

export function getFooterLinks(): MenuItemConfig[] {
  const productItems: MenuItemConfig[] = [];
  productItems.push({
    title: m.features,
    href: Routes.Features,
    external: false,
  });
  if (websiteConfig.payment?.enable) {
    productItems.push({
      title: m.pricing,
      href: Routes.Pricing,
      external: false,
    });
  }
  productItems.push({
    title: m.faq,
    href: Routes.Faqs,
    external: false,
  });

  // More sections: resources, company, legal...

  return [
    { title: m.product, items: productItems },
    { title: m.resources, items: resourcesItems },
    { title: m.company, items: companyItems },
    { title: m.legal, items: legalItems },
  ];
}