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.