Footer | iTwinUI

Legally required links that stick to the bottom of entry pages.

import * as React from 'react';
import { Footer } from '@itwin/itwinui-react';

export default () => {
  return <Footer />;
};

The footer is fixed to the bottom of a web page, and contains your typical legally required links. The legal footer is only required to be displayed on pages that are considered a “main entry point into your application”. This means that the sign in and home page of any hub / app are good places to display the footer. You do not need to display the footer within an App UI widget, or deeper pages within an app. You can not include the footer on a page with infinite scrolling because you can not reach the bottom of the page.

Customizations

Alter standard footer section by modifying elements or adding new custom elements and content.

Appended Custom Elements

Along with the default elements, we can also append custom elements by passing an array of elements to the customElements prop. Each object in the array would have the title (label) and url (href) properties. If the url is not passed, then the element is rendered as plain text and not an anchor.

import * as React from 'react';
import { Footer } from '@itwin/itwinui-react';

export default () => {
  return (
    <Footer
      customElements={[
        {
          title: 'Custom',
          url: 'https://www.bentley.com/',
        },
      ]}
    />
  );
};

Only Custom Elements

To remove all default elements and only use custom elements, pass a function to the customElements prop. The function should return an array of objects, each with title (label) and url (href). Similar to the above case, if url is not passed, the element is rendered as plain text and not an anchor.

import * as React from 'react';
import { Footer } from '@itwin/itwinui-react';

export default () => {
  return (
    <Footer
      customElements={() => [
        {
          title: 'Custom Element 1',
          url: 'https://www.bentley.com/',
        },
        {
          title: 'Custom Element 2',
        },
        {
          title: 'Custom Element 3',
        },
        {
          title: 'Custom Element 4',
        },
      ]}
    />
  );
};

Customized Default And Custom Elements

Add customized default and custom elements by creating customUrls and translatedTitles objects. Show Footer component by returning new array containing customizedDefaultElements and customElementswhich are default and custom elements respectively.

import * as React from 'react';
import { Footer } from '@itwin/itwinui-react';

export default () => {
  const customElements = (defaultElements) => {
    const customUrls = {
      privacy: 'https://www.bentley.com/',
      cookies: 'https://www.bentley.com/',
      legalNotices: 'https://www.bentley.com/',
    };
    const translatedTitles = {
      termsOfService: 'Terms of service translated',
      privacy: 'Privacy translated',
      termsOfUse: 'Terms of use translated',
      cookies: 'Cookies translated',
      legalNotices: 'Legal notices translated',
    };
    const customElements = [
      {
        title: 'Custom Element 1',
        url: 'https://www.bentley.com/',
      },
      {
        title: 'Custom Element 2',
      },
    ];
    const customizedDefaultElements = defaultElements.map(
      ({ key, title, url }) => ({
        key: key,
        title: key ? translatedTitles[key] ?? title : title,
        url: key ? customUrls[key] ?? url : url,
      }),
    );
    return [...customizedDefaultElements, ...customElements];
  };
  return <Footer customElements={customElements} />;
};

Custom Content

Add custom content and icons to the Footer component. Construct custom elements by concatenating customItem with other defaultFooterElements.

import * as React from 'react';
import { Footer, defaultFooterElements } from '@itwin/itwinui-react';
import { SvgSmileyHappyHollow } from '@itwin/itwinui-icons-react';

export default () => {
  const customItem = (
    <Footer.Item key='copyright'>
      <SvgSmileyHappyHollow className='demo-svg' />
      <span>Powered by Happiness © {new Date().getFullYear()}</span>
    </Footer.Item>
  );
  return (
    <Footer>
      <Footer.List>
        {[
          customItem,
          ...defaultFooterElements
            .filter((el) => el.key !== 'copyright')
            .flatMap((element, index) => {
              return (
                <React.Fragment
                  key={element.key || `${element.title}-${index}`}
                >
                  <Footer.Separator />
                  <Footer.Item>
                    {element.url ? (
                      <a href={element.url} target='_blank' rel='noreferrer'>
                        {element.title}
                      </a>
                    ) : (
                      element.title
                    )}
                  </Footer.Item>
                </React.Fragment>
              );
            }),
        ]}
      </Footer.List>
    </Footer>
  );
};

Appearance

The footer text is centered within the frame it is being displayed within, not centered within the viewport. This takes into consideration things that indent the body frame such as the side navigation.

The hyperlinks within the footer are styled visibly different and use the $iui-text-color-muted color rather than the typical $iui-color-foreground-primary color. This is done purposefully to help the footer content not be confused with the actual content of the app.

Optionally, you may include a 2nd line of text to display version numbers and/or server location for debugging reasons. You may choose to display this line to specific users such as beta users or Bentley Systems employees only.

If you feel the need to add additional links, you may append links to the end of the footer’s first line.

Props

Prop	Description	Default
customElements	Customize footer elements. Providing a `FooterElement[]` will append the custom elements to the end of the default elements. Providing a function that returns a `FooterElement[]` allows further customization - whatever is returned from the function is displayed in the footer with no amendments. FooterElement[] \| ((defaultElements: FooterElement[]) => FooterElement[])
translatedTitles	Provide localized strings. TitleTranslations
children	Custom footer content. If provided, it will render only what you passed. Use `defaultFooterElements` to get the default footer elements. ReactNode
id	string
className	string
style	CSSProperties