WIP

client/my-sites/domains/domain-management/controller.jsx

@@ -424,6 +424,7 @@ export default {
 				subpageKey={ pageContext.params.subPageKey }
 				siteName={ pageContext.params.site }
 				domainName={ pageContext.params.domain }
+				inSiteContext={ pageContext.inSiteContext }
 			>
 				{ pageContext.primary }
 			</SubpageWrapper>

client/my-sites/domains/domain-management/settings/cards/contact-information/contacts-card.tsx

@@ -187,7 +187,11 @@ const ContactsPrivacyCard = ( props: ContactsCardProps ) => {
 	const { selectedDomainName, canManageConsent, currentRoute, readOnly, isHundredYearDomain } =
 		props;
 	const editContactInfoLink = isUnderDomainManagementOverview( currentRoute )
-		? domainManagementAllEditContactInfo( props.selectedSite.slug, props.selectedDomainName )
+		? domainManagementAllEditContactInfo(
+				props.selectedSite.slug,
+				props.selectedDomainName,
+				currentRoute
+		  )
 		: domainManagementEditContactInfo(
 				props.selectedSite.slug,
 				props.selectedDomainName,

client/my-sites/domains/domain-management/subpage-wrapper/headers/contact-information-header.tsx

@@ -0,0 +1,56 @@
+import { useTranslate } from 'i18n-calypso';
+import { useMemo } from 'react';
+import NavigationHeader from 'calypso/components/navigation-header';
+import { domainManagementOverviewRoot } from 'calypso/my-sites/domains/paths';
+import { useSelector } from 'calypso/state';
+import { getSite } from 'calypso/state/sites/selectors';
+import { CustomHeaderComponentType } from './custom-header-component-type';
+
+const ContactInformationHeader: CustomHeaderComponentType = ( {
+	selectedDomainName,
+	selectedSiteSlug,
+	inSiteContext,
+} ) => {
+	const translate = useTranslate();
+	const site = useSelector( ( state ) => getSite( state, selectedSiteSlug ) );
+
+	const navigationItems = useMemo( () => {
+		const baseNavigationItems = [
+			{
+				label: selectedDomainName,
+				href: `${ domainManagementOverviewRoot() }/${ selectedDomainName }/${ selectedSiteSlug }`,
+			},
+			{
+				label: translate( 'Contact information' ),
+			},
+		];
+
+		if ( inSiteContext ) {
+			return [
+				{
+					label: site?.name || selectedDomainName,
+					href: `/overview/${ selectedSiteSlug }`,
+				},
+				...baseNavigationItems,
+			];
+		}
+
+		return baseNavigationItems;
+	}, [ inSiteContext, selectedDomainName, selectedSiteSlug, site, translate ] );
+
+	return (
+		<>
+			<NavigationHeader
+				className="navigation-header__breadcrumb"
+				navigationItems={ navigationItems }
+			/>
+			<NavigationHeader
+				className="navigation-header__title"
+				title={ translate( 'Contact information' ) }
+				subtitle={ translate( "Manage your domain's contact details." ) }
+			/>
+		</>
+	);
+};
+
+export default ContactInformationHeader;

client/my-sites/domains/domain-management/subpage-wrapper/headers/custom-header-component-type.ts

@@ -2,4 +2,5 @@ export type CustomHeaderComponentType = React.ComponentType< {
 	selectedDomainName: string;
 	selectedSiteSlug: string;
 	context?: string;
+	inSiteContext?: boolean;
 } >;

client/my-sites/domains/domain-management/subpage-wrapper/index.tsx

@@ -9,9 +9,16 @@ type SubpageWrapperProps = {
 	subpageKey: string;
 	siteName: string;
 	domainName: string;
+	inSiteContext?: boolean;
 };
 
-const SubpageWrapper = ( { children, subpageKey, siteName, domainName }: SubpageWrapperProps ) => {
+const SubpageWrapper = ( {
+	children,
+	subpageKey,
+	siteName,
+	domainName,
+	inSiteContext,
+}: SubpageWrapperProps ) => {
 	const { CustomHeader, title, subtitle, context } = getSubpageParams( subpageKey ) || {};
 
 	if ( CustomHeader ) {
@@ -21,6 +28,7 @@ const SubpageWrapper = ( { children, subpageKey, siteName, domainName }: Subpage
 					selectedDomainName={ domainName }
 					selectedSiteSlug={ siteName }
 					context={ context }
+					inSiteContext={ inSiteContext }
 				/>
 				<div className="subpage-wrapper__content">{ children }</div>
 			</div>

client/my-sites/domains/domain-management/subpage-wrapper/subpages.tsx

@@ -2,6 +2,7 @@ import { __ } from '@wordpress/i18n';
 import AddForwardingEmailHeader from './headers/add-fowarding-email-header';
 import MailboxHeader from './headers/add-mailbox-header';
 import CompareEmailProvidersHeader from './headers/compare-email-providers';
+import ContactInformationHeader from './headers/contact-information-header';
 import { CustomHeaderComponentType } from './headers/custom-header-component-type';
 import DnsRecordHeader, {
 	addDnsRecordTitle,
@@ -48,8 +49,7 @@ const SUBPAGE_TO_PARAMS_MAP: Record< string, SubpageWrapperParamsType > = {
 		showDetails: false,
 	},
 	[ EDIT_CONTACT_INFO ]: {
-		title: __( 'Contact information' ),
-		subtitle: __( "Manage your domain's contact details." ),
+		CustomHeader: ContactInformationHeader,
 	},
 	[ ADD_DNS_RECORD ]: {
 		CustomHeader: DnsRecordHeader,

client/my-sites/domains/paths.js

@@ -57,16 +57,20 @@ function domainManagementTransferBase(
 }
 
 export function isUnderDomainManagementAll( path ) {
-	return path?.startsWith( domainManagementAllRoot() + '/' ) || path === domainManagementRoot();
+	return path?.startsWith( domainManagementAllRoot() + '/' );
 }
 
 export function isUnderDomainManagementOverview( path ) {
 	return (
 		path?.startsWith( domainManagementOverviewRoot() + '/' ) ||
-		path?.startsWith( '/overview/site-domain/' )
+		path?.startsWith( domainSiteContextBasePath() + '/' )
 	);
 }
 
+export function isUnderDomainSiteContext( path ) {
+	return path?.startsWith( domainSiteContextBasePath() + '/' );
+}
+
 export function domainAddNew( siteName, searchTerm ) {
 	let path = `/domains/add`;
 
@@ -93,6 +97,10 @@ export function domainManagementOverviewRoot() {
 	return domainManagementAllRoot() + '/overview';
 }
 
+export function domainSiteContextBasePath() {
+	return '/overview/site-domain';
+}
+
 export function domainManagementAllEmailRoot() {
 	return domainManagementAllRoot() + '/email';
 }
@@ -152,9 +160,13 @@ export function domainManagementAllOverview( siteName, domainName ) {
 /**
  * @param {string} siteName
  * @param {string} domainName
+ * @param {string?} relativeTo
  */
-export function domainManagementAllEditContactInfo( siteName, domainName ) {
-	return domainManagementAllRoot() + '/contact-info/edit/' + domainName + '/' + siteName;
+export function domainManagementAllEditContactInfo( siteName, domainName, relativeTo = null ) {
+	const pathSegment = `contact-info/edit/${ domainName }/${ siteName }`;
+	return isUnderDomainSiteContext( relativeTo )
+		? `${ domainSiteContextBasePath() }/${ domainManagementAllRoot() }/${ pathSegment }`
+		: `${ domainManagementAllRoot() }/${ pathSegment }`;
 }
 
 export function domainManagementAllEditSelectedContactInfo() {

config/development.json

@@ -38,7 +38,7 @@
 		"automated-migration/pending-status": true,
 		"bulk-plugin-management": true,
 		"calypso/ai-blogging-prompts": true,
-		"calypso/all-domain-management": false,
+		"calypso/all-domain-management": true,
 		"calypso/big-sky": true,
 		"calypso/help-center": true,
 		"calypsoify/plugins": true,