diff --git a/.changeset/wicked-knives-begin.md b/.changeset/wicked-knives-begin.md
new file mode 100644
index 00000000000..368d91ce20e
--- /dev/null
+++ b/.changeset/wicked-knives-begin.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+---
+
+- Added `customActivator` prop to `TopBar.UserMenu`
+- Added support for setting a `ReactNode ` on `ActionList` `Section` `title`
diff --git a/polaris-react/src/components/ActionList/ActionList.tsx b/polaris-react/src/components/ActionList/ActionList.tsx
index 9d384861588..92ec54bdafc 100644
--- a/polaris-react/src/components/ActionList/ActionList.tsx
+++ b/polaris-react/src/components/ActionList/ActionList.tsx
@@ -49,7 +49,7 @@ export function ActionList({
   const sectionMarkup = finalSections.map((section, index) => {
     return section.items.length > 0 ? (
       <Section
-        key={section.title || index}
+        key={typeof section.title === 'string' ? section.title : index}
         section={section}
         hasMultipleSections={hasMultipleSections}
         actionRole={actionRole}
diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx
index 921d6b83681..b4b4e7703b4 100644
--- a/polaris-react/src/components/ActionList/components/Section/Section.tsx
+++ b/polaris-react/src/components/ActionList/components/Section/Section.tsx
@@ -57,18 +57,25 @@ export function Section({
     },
   );
 
-  const titleMarkup = section.title ? (
-    <Box
-      paddingBlockStart="4"
-      paddingInlineStart="4"
-      paddingBlockEnd="2"
-      paddingInlineEnd="4"
-    >
-      <Text as="p" variant="headingXs">
-        {section.title}
-      </Text>
-    </Box>
-  ) : null;
+  let titleMarkup: string | React.ReactNode = null;
+
+  if (section.title) {
+    titleMarkup =
+      typeof section.title === 'string' ? (
+        <Box
+          paddingBlockStart="4"
+          paddingInlineStart="4"
+          paddingBlockEnd="2"
+          paddingInlineEnd="4"
+        >
+          <Text as="p" variant="headingXs">
+            {section.title}
+          </Text>
+        </Box>
+      ) : (
+        <Box padding="2">{section.title}</Box>
+      );
+  }
 
   let sectionRole: 'menu' | 'presentation' | undefined;
   switch (actionRole) {
diff --git a/polaris-react/src/components/TopBar/TopBar.stories.tsx b/polaris-react/src/components/TopBar/TopBar.stories.tsx
index b79db4a50b9..b6b2e37be14 100644
--- a/polaris-react/src/components/TopBar/TopBar.stories.tsx
+++ b/polaris-react/src/components/TopBar/TopBar.stories.tsx
@@ -1,13 +1,29 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {ActionList, Frame, Icon, TopBar, Text} from '@shopify/polaris';
+import {ActionList, Frame, Icon, TopBar, Text, Avatar} from '@shopify/polaris';
 import {ArrowLeftMinor, QuestionMarkMajor} from '@shopify/polaris-icons';
 
+import type {UserMenuProps} from '../../../build/ts/latest/src/components/TopBar';
+
 export default {
   component: TopBar,
 } as ComponentMeta<typeof TopBar>;
 
-export function Default() {
+function TopBarWrapper({
+  userActions,
+  name,
+  detail,
+  initials,
+  customActivator,
+  message,
+}: {
+  userActions?: UserMenuProps['actions'];
+  name?: UserMenuProps['name'];
+  detail?: UserMenuProps['detail'];
+  initials?: UserMenuProps['initials'];
+  customActivator?: UserMenuProps['customActivator'];
+  message?: UserMenuProps['message'];
+}) {
   const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
   const [isSecondaryMenuOpen, setIsSecondaryMenuOpen] = useState(false);
   const [isSearchActive, setIsSearchActive] = useState(false);
@@ -47,17 +63,23 @@ export function Default() {
 
   const userMenuMarkup = (
     <TopBar.UserMenu
-      actions={[
-        {
-          items: [{content: 'Back to Shopify', icon: ArrowLeftMinor}],
-        },
-        {
-          items: [{content: 'Community forums'}],
-        },
-      ]}
-      name="Dharma"
-      detail="Jaded Pixel"
-      initials="D"
+      actions={
+        userActions
+          ? userActions
+          : [
+              {
+                items: [{content: 'Back to Shopify', icon: ArrowLeftMinor}],
+              },
+              {
+                items: [{content: 'Community forums'}],
+              },
+            ]
+      }
+      name={name ? name : 'Dharma'}
+      detail={detail && detail}
+      initials={initials ? initials : 'JD'}
+      customActivator={customActivator}
+      message={message}
       open={isUserMenuOpen}
       onToggle={toggleIsUserMenuOpen}
     />
@@ -118,3 +140,81 @@ export function Default() {
     </div>
   );
 }
+
+export function Default() {
+  const userActions: UserMenuProps['actions'] = [
+    {
+      items: [{content: 'Back to Shopify', icon: ArrowLeftMinor}],
+    },
+    {
+      items: [{content: 'Community forums'}],
+    },
+  ];
+  return <TopBarWrapper userActions={userActions} name="Dharma" initials="D" />;
+}
+
+export function WithCustomActivator() {
+  const userActions: UserMenuProps['actions'] = [
+    {
+      items: [{content: 'Back to Shopify', icon: ArrowLeftMinor}],
+    },
+    {
+      items: [{content: 'Community forums'}],
+    },
+  ];
+
+  const customActivator = (
+    <>
+      <Avatar size="small" initials="D" name="Dharma" />
+      <span style={{marginLeft: '0.5rem'}}>
+        <Text as="p" alignment="start" fontWeight="medium" truncate>
+          Dharma
+        </Text>
+        <Text
+          as="p"
+          variant="bodySm"
+          alignment="start"
+          color="subdued"
+          truncate
+        >
+          Jaded Pixel
+        </Text>
+      </span>
+    </>
+  );
+
+  return (
+    <TopBarWrapper
+      userActions={userActions}
+      name="Dharma"
+      detail="Jaded Pixel"
+      customActivator={customActivator}
+    />
+  );
+}
+
+export function withMessage() {
+  const userActions: UserMenuProps['actions'] = [
+    {
+      items: [{content: 'Back to Shopify', icon: ArrowLeftMinor}],
+    },
+    {
+      items: [{content: 'Community forums'}],
+    },
+  ];
+
+  return (
+    <TopBarWrapper
+      userActions={userActions}
+      name="Dharma"
+      detail="Jaded Pixel"
+      initials="JD"
+      message={{
+        title: 'Message title',
+        description: 'Message description',
+        link: {to: 'https://www.shopify.com', content: 'Link content'},
+        action: {content: 'Action content', onClick: () => {}},
+      }}
+    />
+  );
+}
diff --git a/polaris-react/src/components/TopBar/components/Menu/Menu.tsx b/polaris-react/src/components/TopBar/components/Menu/Menu.tsx
index e35a9ed4ac3..47613683657 100644
--- a/polaris-react/src/components/TopBar/components/Menu/Menu.tsx
+++ b/polaris-react/src/components/TopBar/components/Menu/Menu.tsx
@@ -57,8 +57,6 @@ export function Menu(props: MenuProps) {
     />
   );
 
-  const isFullHeight = Boolean(message);
-
   return (
     <Popover
       activator={
@@ -76,7 +74,7 @@ export function Menu(props: MenuProps) {
       active={open}
       onClose={onClose}
       fixed
-      fullHeight={isFullHeight}
+      fullHeight
       preferredAlignment="right"
     >
       <ActionList onActionAnyItem={onClose} sections={actions} />
diff --git a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.scss b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.scss
index 58294cf3e81..32f9f1a9f15 100644
--- a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.scss
+++ b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.scss
@@ -2,7 +2,7 @@
 
 .Details {
   max-width: 160px;
-  margin-left: var(--p-space-2);
+  margin-right: var(--p-space-2);
 
   @media #{$p-breakpoints-md-down} {
     display: none;
diff --git a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
index 4b973ceff3e..c59e0ba58e0 100644
--- a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
+++ b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
@@ -29,6 +29,8 @@ export interface UserMenuProps {
   open: boolean;
   /** A callback function to handle opening and closing the user menu */
   onToggle(): void;
+  /** A custom activator that can be used when the default activator is not desired */
+  customActivator?: React.ReactNode;
 }
 
 export function UserMenu({
@@ -41,18 +43,14 @@ export function UserMenu({
   onToggle,
   open,
   accessibilityLabel,
+  customActivator,
 }: UserMenuProps) {
   const showIndicator = Boolean(message);
 
-  const activatorContentMarkup = (
+  const activatorContentMarkup = customActivator ? (
+    customActivator
+  ) : (
     <>
-      <MessageIndicator active={showIndicator}>
-        <Avatar
-          size="small"
-          source={avatar}
-          initials={initials && initials.replace(' ', '')}
-        />
-      </MessageIndicator>
       <span className={styles.Details}>
         <Text as="p" alignment="start" fontWeight="medium" truncate>
           {name}
@@ -67,6 +65,14 @@ export function UserMenu({
           {detail}
         </Text>
       </span>
+      <MessageIndicator active={showIndicator}>
+        <Avatar
+          shape="square"
+          size="small"
+          initials={initials && initials.replace(' ', '')}
+          source={avatar}
+        />
+      </MessageIndicator>
     </>
   );
 
diff --git a/polaris-react/src/types.ts b/polaris-react/src/types.ts
index da9ea5b2599..ff519bc3b6c 100644
--- a/polaris-react/src/types.ts
+++ b/polaris-react/src/types.ts
@@ -212,7 +212,7 @@ export interface ActionListItemDescriptor
 
 export interface ActionListSection {
   /** Section title */
-  title?: string;
+  title?: string | React.ReactNode;
   /** Collection of action items for the list */
   items: readonly ActionListItemDescriptor[];
 }