diff --git a/components/layout/help-links.tsx b/components/layout/help-links.tsx
new file mode 100644
index 000000000..ca59cb262
--- /dev/null
+++ b/components/layout/help-links.tsx
@@ -0,0 +1,81 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { useConfig } from '@/hooks/use-config';
+import { helpLinksFrom, type HelpLink } from '@/lib/help-links';
+import { cn } from '@/lib/utils';
+
+/** The configured accessibility and help links, in their fixed order. */
+export function useHelpLinks(): HelpLink[] {
+ const { accessibilityStatementUrl, accessibilityFeedbackUrl, helpUrl, easyReadUrl, signLanguageUrl } = useConfig();
+ return helpLinksFrom({ accessibilityStatementUrl, accessibilityFeedbackUrl, helpUrl, easyReadUrl, signLanguageUrl });
+}
+
+function LinkText({ link }: { link: HelpLink }) {
+ const t = useTranslations('help_links');
+ return (
+ <>
+ {t(link.id)}
+ {link.external &&
({t('new_tab')})}
+ >
+ );
+}
+
+/**
+ * The links as a small navigation list, for the login page footer and the
+ * settings sidebar. Renders nothing when the operator set none.
+ */
+export function HelpLinks({ className, listClassName, linkClassName }: { className?: string; listClassName?: string; linkClassName?: string }) {
+ const t = useTranslations('help_links');
+ const links = useHelpLinks();
+ if (links.length === 0) return null;
+ return (
+
+ );
+}
+
+/**
+ * The links as menu items, for the account menu. `onSelect` closes the
+ * menu. Renders nothing when the operator set none.
+ */
+export function HelpMenuItems({ onSelect, className, itemClassName }: {
+ onSelect?: () => void;
+ className?: string;
+ itemClassName?: string;
+}) {
+ const t = useTranslations('help_links');
+ const links = useHelpLinks();
+ if (links.length === 0) return null;
+ return (
+
+ );
+}
diff --git a/components/settings/settings-app.tsx b/components/settings/settings-app.tsx
index 52f70f9e7..b5df24027 100644
--- a/components/settings/settings-app.tsx
+++ b/components/settings/settings-app.tsx
@@ -47,6 +47,7 @@ import { CalendarManagementSettings } from '@/components/settings/calendar-manag
import { AddressBookManagementSettings } from '@/components/settings/address-book-management-settings';
import { FilterSettings } from '@/components/settings/filter-settings';
import { AboutDataSettings, AboutFooter } from '@/components/settings/about-data-settings';
+import { HelpLinks } from '@/components/layout/help-links';
import { OrganizeSettings } from '@/components/settings/organize-settings';
import { AccountSecuritySettings } from '@/components/settings/account-security-settings';
import { FilesSettingsComponent } from '@/components/settings/files-settings';
@@ -1032,6 +1033,7 @@ export function SettingsApp({ linkSegments: routeSegments }: SettingsAppProps =