Skip to content

Footer Navigation

Navigation – Footer

Footer Navigation organises a site’s secondary links into up to four columns, each with a title and one or more link groups. On desktop every column is fully expanded; on narrower viewports each column collapses into its own accordion, so users can scan section titles first and open only the ones they need.

  • React

Maintained by Foundation

    Ready to use

    ReactAccessibility

    Footer Navigation is an AEM-authored component. Import FooterNavigationAem from @tmedxp/aem-react-components and render it with the model AEM resolves for the component’s resource type — you don’t assemble the columns or link groups yourself.

    Usage

    Section titled “Usage”
    import type { AEMComponentProperties } from '@dcx-be/aem-react-components';
    import { FooterNavigationAem } from '@tmedxp/aem-react-components';
    

    import type { FooterNavigationModel } from './types/types';
    

    const FooterNavigation = ({
      model,
      cqPath,
      context,
      resourceType,
    }: AEMComponentProperties<FooterNavigationModel>) => {
      return (
        <FooterNavigationAem
          context={context}
          cqPath={cqPath}
          resourceType={resourceType}
          model={model}
        />
      );
    };
    

    export { FooterNavigation };

    Properties

    Section titled “Properties”

    FooterNavigationAem takes the standard AEMComponentProperties<FooterNavigationModel> shape (model, cqPath, context) shared by every AEM-authored component.

    FooterNavigationModel

    Section titled “FooterNavigationModel”

    The root model always exposes exactly four columns, column1 through column4, each resolved as its own AEM resource.

    Prop Type Description Optional
    :items { column1, column2, column3, column4 } of NavigationColumnModel The four footer columns, keyed by slot. ❌
    :itemsOrder ['column1', 'column2', 'column3', 'column4'] Render order of the columns. ❌
    Section titled “NavigationColumnModel”

    Each column is described by NavigationColumnProperties, which combines a title with a list of link groups.

    Prop Type Description Optional
    title string The column heading, shown always on desktop and as the accordion trigger on narrower viewports. ❌
    groupType string Authoring hint used to resolve how the column’s groups were configured. ✅
    linkGroups NavigationColumnLinkGroup[] The groups of links rendered inside the column. ✅
    Section titled “NavigationColumnLinkGroup”

    Each group is either a single link, a flat list of links, or a collapsible sub-group with its own subtitle — the component picks the right presentation based on which fields are set.

    Prop Type Description Optional
    subtitleLink LinkModel The group’s heading link. Rendered as a plain link when the group has no children. ❌
    linkLevelType string Set to 'singlelevelLinks' for a flat group of singleLinks with no subtitle. ✅
    groupSelector string Authoring identifier for the group. ✅
    links LinkModel[] Child links shown under subtitleLink, collapsible together with it. ✅
    singleLinks LinkModel[] Flat links shown with no subtitle, used when linkLevelType is 'singlelevelLinks'. ✅

    LinkModel is the shared AEM link shape (linkText, linkType, internalLink/externalLink, ctaType, and related behaviour flags) used by every AEM-authored link and button in the design system, so it isn’t redefined here — refer to the component that renders the actual anchor for its full shape.