Footer Section

Demo

Props

NameTypeDescription
brand{ logo: { src: string; alt: string; width: number; height: number; className?: string; darksrc?: string }; href?: string }Optional branding information including logo and link.
sloganstringOptional slogan text.
groupsFooterLinkGroup[]Array of link groups to be displayed in the footer.
brandChildReact.ReactNodeOptional React node placed near the brand logo.
childrenReact.ReactNodeAdditional child elements to be rendered in the footer.
localestringLocale string for internationalization.
customLinkComponentLinkComponentCustom component for rendering links.
classNames{ root?: string; slogan?: string; brandChild?: string; groupTitle?: string; groupLink?: string }Optional classNames for styling different parts of the footer.

Styles

This component uses utility classes for styling, which can be customized via the classNames prop. Specific classes include:

  • root: The main container of the footer.
  • slogan: The slogan text.
  • brandChild: The container for the brandChild element.
  • groupTitle: Titles of the link groups.
  • groupLink: Individual links within the link groups.