diff --git a/.changeset/navlist-linked-subnav.md b/.changeset/navlist-linked-subnav.md
new file mode 100644
index 00000000000..c2ae5e0c8bc
--- /dev/null
+++ b/.changeset/navlist-linked-subnav.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+NavList: Support linked sub-nav parent items with a separate toggle
diff --git a/packages/react/src/ActionList/ActionList.module.css b/packages/react/src/ActionList/ActionList.module.css
index aa7d807f673..b3351b6972b 100644
--- a/packages/react/src/ActionList/ActionList.module.css
+++ b/packages/react/src/ActionList/ActionList.module.css
@@ -115,7 +115,7 @@
   border-radius: var(--borderRadius-medium);
 
   /* apply flex if trailing action exists as an immediate child */
-  &[data-has-trailing-action] {
+  &[data-has-trailing-action]:not([data-has-subitem='true']) {
     display: flex;
     flex-wrap: nowrap;
   }
@@ -497,6 +497,24 @@
 
 /* button or a tag */
 
+.ActionListItemRow {
+  display: flex;
+  border-radius: var(--borderRadius-medium);
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--control-transparent-bgColor-hover);
+      outline: solid var(--borderWidth-thin) transparent;
+      outline-offset: calc(-1 * var(--borderWidth-thin));
+      box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);
+    }
+  }
+
+  &:active {
+    background-color: var(--control-transparent-bgColor-active);
+  }
+}
+
 /* [ [spacer] [leadingAction] [leadingVisual] [content] ] */
 .ActionListContent {
   --subitem-depth: 0px;
diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
index 1606952e3e1..2957b3ff6f1 100644
--- a/packages/react/src/ActionList/Item.tsx
+++ b/packages/react/src/ActionList/Item.tsx
@@ -334,67 +334,69 @@ const UnwrappedItem = <As extends React.ElementType = 'li'>(
         data-trailing-action-loading={trailingActionRendered && slots.trailingAction?.props.loading ? true : undefined}
         className={clsx(classes.ActionListItem, className)}
       >
-        <ConditionalTooltip ref={forwardedRef} text={_PrivateTooltipText ?? truncatedText} enabled={buttonSemantics}>
-          <ItemWrapper
-            {...wrapperProps}
-            className={classes.ActionListContent}
-            data-size={size}
-            // @ts-ignore: ItemWrapper is polymorphic and the ref type depends on the rendered element ('button' or 'li')
-            ref={forwardedRef}
-          >
-            {/* Reset TooltipContext so that child components don't detect
-                the ConditionalTooltip and suppress their own internal tooltips. */}
-            <TooltipContext.Provider value={{}}>
-              <span className={classes.Spacer} />
-              <Selection selected={selected} className={classes.LeadingAction} />
-              <VisualOrIndicator
-                inactiveText={showInactiveIndicator ? inactiveText : undefined}
-                itemHasLeadingVisual={Boolean(slots.leadingVisual)}
-                labelId={labelId}
-                loading={loading}
-                position="leading"
-              >
-                {slots.leadingVisual}
-              </VisualOrIndicator>
-              {/* TODO: next-major: change to data-component="ActionList.Item.DividerContainer" next major version */}
-              <span className={classes.ActionListSubContent} data-component="ActionList.Item--DividerContainer">
-                <ConditionalWrapper
-                  if={!!slots.description}
-                  className={classes.ItemDescriptionWrap}
-                  data-description-variant={descriptionVariant}
-                >
-                  <span id={labelId} className={classes.ItemLabel} data-component="ActionList.Item.Label">
-                    {childrenWithoutSlots}
-                    {/* Loading message needs to be in here so it is read with the label */}
-                    {/* If the item is inactive, we do not simultaneously announce that it is loading */}
-                    {loading === true && !inactive && <VisuallyHidden>Loading</VisuallyHidden>}
-                  </span>
-                  {slots.description}
-                </ConditionalWrapper>
+        <ConditionalWrapper if={Boolean(slots.subItem && trailingActionRendered)} className={classes.ActionListItemRow}>
+          <ConditionalTooltip ref={forwardedRef} text={_PrivateTooltipText ?? truncatedText} enabled={buttonSemantics}>
+            <ItemWrapper
+              {...wrapperProps}
+              className={classes.ActionListContent}
+              data-size={size}
+              // @ts-ignore: ItemWrapper is polymorphic and the ref type depends on the rendered element ('button' or 'li')
+              ref={forwardedRef}
+            >
+              {/* Reset TooltipContext so that child components don't detect
+                  the ConditionalTooltip and suppress their own internal tooltips. */}
+              <TooltipContext.Provider value={{}}>
+                <span className={classes.Spacer} />
+                <Selection selected={selected} className={classes.LeadingAction} />
                 <VisualOrIndicator
                   inactiveText={showInactiveIndicator ? inactiveText : undefined}
                   itemHasLeadingVisual={Boolean(slots.leadingVisual)}
                   labelId={labelId}
                   loading={loading}
-                  position="trailing"
+                  position="leading"
                 >
-                  {trailingVisual}
+                  {slots.leadingVisual}
                 </VisualOrIndicator>
-
-                {
-                  // If the item is inactive, but it's not in an overlay (e.g. ActionMenu, SelectPanel),
-                  // render the inactive warning message directly in the item.
-                  !showInactiveIndicator && inactiveText ? (
-                    <span className={classes.InactiveWarning} id={inactiveWarningId}>
-                      {inactiveText}
+                {/* TODO: next-major: change to data-component="ActionList.Item.DividerContainer" next major version */}
+                <span className={classes.ActionListSubContent} data-component="ActionList.Item--DividerContainer">
+                  <ConditionalWrapper
+                    if={!!slots.description}
+                    className={classes.ItemDescriptionWrap}
+                    data-description-variant={descriptionVariant}
+                  >
+                    <span id={labelId} className={classes.ItemLabel} data-component="ActionList.Item.Label">
+                      {childrenWithoutSlots}
+                      {/* Loading message needs to be in here so it is read with the label */}
+                      {/* If the item is inactive, we do not simultaneously announce that it is loading */}
+                      {loading === true && !inactive && <VisuallyHidden>Loading</VisuallyHidden>}
                     </span>
-                  ) : null
-                }
-              </span>
-            </TooltipContext.Provider>
-          </ItemWrapper>
-        </ConditionalTooltip>
-        {!inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction}
+                    {slots.description}
+                  </ConditionalWrapper>
+                  <VisualOrIndicator
+                    inactiveText={showInactiveIndicator ? inactiveText : undefined}
+                    itemHasLeadingVisual={Boolean(slots.leadingVisual)}
+                    labelId={labelId}
+                    loading={loading}
+                    position="trailing"
+                  >
+                    {trailingVisual}
+                  </VisualOrIndicator>
+
+                  {
+                    // If the item is inactive, but it's not in an overlay (e.g. ActionMenu, SelectPanel),
+                    // render the inactive warning message directly in the item.
+                    !showInactiveIndicator && inactiveText ? (
+                      <span className={classes.InactiveWarning} id={inactiveWarningId}>
+                        {inactiveText}
+                      </span>
+                    ) : null
+                  }
+                </span>
+              </TooltipContext.Provider>
+            </ItemWrapper>
+          </ConditionalTooltip>
+          {!inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction}
+        </ConditionalWrapper>
         {slots.subItem}
       </li>
     </ItemContext.Provider>
diff --git a/packages/react/src/NavList/NavList.docs.json b/packages/react/src/NavList/NavList.docs.json
index 72258bed5f1..3376dd09627 100644
--- a/packages/react/src/NavList/NavList.docs.json
+++ b/packages/react/src/NavList/NavList.docs.json
@@ -15,6 +15,7 @@
     {"id": "components-navlist-features--with-group-expand"},
     {"id": "components-navlist-features--with-group-heading-links"},
     {"id": "components-navlist-features--with-inactive-items"},
+    {"id": "components-navlist-features--with-linked-sub-nav-parent"},
     {"id": "components-navlist-features--with-nested-sub-items"},
     {"id": "components-navlist-features--with-next-js-link"},
     {"id": "components-navlist-features--with-react-router-link"},
@@ -95,7 +96,7 @@
           "name": "href",
           "type": "string",
           "defaultValue": "",
-          "description": "The URL that the item navigates to. `href` is passed to the underlying `<a>` element. If `as` is specified, the component may need different props. If the item contains a sub-nav, the item is rendered as a `<button>` and `href` is ignored."
+          "description": "The URL that the item navigates to. `href` is passed to the underlying `<a>` element. If `as` is specified, the component may need different props. If the item contains a sub-nav, the item is rendered as a `<button>` and `href` is ignored unless `subNavToggleLabel` is also set."
         },
         {
           "name": "aria-current",
@@ -108,6 +109,11 @@
           "type": "boolean",
           "description": "The open state of the item when it is initially rendered if the item has a SubNav."
         },
+        {
+          "name": "subNavToggleLabel",
+          "type": "string",
+          "description": "Renders an item with a SubNav as a link with a separate toggle button. The value is used as the toggle button's accessible name."
+        },
         {
           "name": "inactiveText",
           "type": "string",
diff --git a/packages/react/src/NavList/NavList.features.stories.tsx b/packages/react/src/NavList/NavList.features.stories.tsx
index b9488ea1fae..0b8bbcbe497 100644
--- a/packages/react/src/NavList/NavList.features.stories.tsx
+++ b/packages/react/src/NavList/NavList.features.stories.tsx
@@ -53,6 +53,23 @@ export const WithSubItems: StoryFn = () => (
   </PageLayout>
 )
 
+export const WithLinkedSubNavParent: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Pane position="start">
+      <NavList>
+        <NavList.Item href="#" subNavToggleLabel="Toggle overview pages">
+          Overview
+          <NavList.SubNav>
+            <NavList.Item href="#">Review requested</NavList.Item>
+            <NavList.Item href="#">Your drafts</NavList.Item>
+          </NavList.SubNav>
+        </NavList.Item>
+      </NavList>
+    </PageLayout.Pane>
+    <PageLayout.Content></PageLayout.Content>
+  </PageLayout>
+)
+
 export const WithNestedSubItems: StoryFn = () => (
   <PageLayout>
     <PageLayout.Pane position="start">
diff --git a/packages/react/src/NavList/NavList.test.tsx b/packages/react/src/NavList/NavList.test.tsx
index 6fd762ea3f4..359b5272fc8 100644
--- a/packages/react/src/NavList/NavList.test.tsx
+++ b/packages/react/src/NavList/NavList.test.tsx
@@ -271,6 +271,63 @@ describe('NavList.Item with NavList.SubNav', () => {
     expect(queryByRole('list', {name: 'Item 2'})).toBeNull()
   })
 
+  it('supports a link with a separate SubNav toggle', () => {
+    const onClick = vi.fn((event: React.MouseEvent) => event.preventDefault())
+    const {getByRole, queryByRole} = render(
+      <NavList>
+        <NavList.Item
+          href="/overview"
+          id="overview-link"
+          aria-current="page"
+          className="custom-class"
+          style={{color: 'red'}}
+          subNavToggleLabel="Toggle overview pages"
+          onClick={onClick}
+        >
+          Overview
+          <NavList.SubNav>
+            <NavList.Item href="/overview/review-requested">Review requested</NavList.Item>
+          </NavList.SubNav>
+        </NavList.Item>
+      </NavList>,
+    )
+    const link = getByRole('link', {name: 'Overview'})
+    const toggle = getByRole('button', {name: 'Toggle overview pages'})
+
+    expect(link).toHaveAttribute('href', '/overview')
+    expect(link).toHaveAttribute('id', 'overview-link')
+    expect(link).toHaveAttribute('aria-current', 'page')
+    expect(link).toHaveStyle({color: 'rgb(255, 0, 0)'})
+    expect(link.closest('li')).toHaveClass('custom-class')
+    expect(toggle).toHaveAttribute('aria-expanded', 'false')
+    expect(queryByRole('list', {name: 'Overview'})).toBeNull()
+
+    fireEvent.click(link)
+    expect(onClick).toHaveBeenCalledOnce()
+    expect(toggle).toHaveAttribute('aria-expanded', 'false')
+
+    onClick.mockClear()
+    fireEvent.click(toggle)
+    expect(onClick).not.toHaveBeenCalled()
+    expect(toggle).toHaveAttribute('aria-expanded', 'true')
+    expect(getByRole('list', {name: 'Overview'})).toBeVisible()
+  })
+
+  it('forwards custom link props when using a separate SubNav toggle', () => {
+    const {getByRole} = render(
+      <NavList>
+        <NavList.Item as={ReactRouterLikeLink} to="/overview" subNavToggleLabel="Toggle overview pages">
+          Overview
+          <NavList.SubNav>
+            <NavList.Item href="/overview/review-requested">Review requested</NavList.Item>
+          </NavList.SubNav>
+        </NavList.Item>
+      </NavList>,
+    )
+
+    expect(getByRole('link', {name: 'Overview'})).toHaveAttribute('href', '/overview')
+  })
+
   it('prevents more than 4 levels of nested SubNavs', () => {
     const consoleSpy = vi
       .spyOn(console, 'error')
diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx
index db954644f45..ed23efe1bf6 100644
--- a/packages/react/src/NavList/NavList.tsx
+++ b/packages/react/src/NavList/NavList.tsx
@@ -1,4 +1,4 @@
-import {ChevronDownIcon, PlusIcon, type Icon} from '@primer/octicons-react'
+import {ChevronDownIcon, ChevronUpIcon, PlusIcon, type Icon} from '@primer/octicons-react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import React, {isValidElement} from 'react'
 import {clsx} from 'clsx'
@@ -135,6 +135,7 @@ export type NavListItemProps<As extends React.ElementType = React.ElementType> =
     children: React.ReactNode
     defaultOpen?: boolean
     href?: string
+    subNavToggleLabel?: string
     'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean
     inactiveText?: string
     tooltipText?: string
@@ -143,7 +144,15 @@ export type NavListItemProps<As extends React.ElementType = React.ElementType> =
 
 const ItemComponent = fixedForwardRef(
   <As extends React.ElementType = 'a'>(
-    {'aria-current': ariaCurrent, children, defaultOpen, tooltipText, as: Component, ...props}: NavListItemProps<As>,
+    {
+      'aria-current': ariaCurrent,
+      children,
+      defaultOpen,
+      subNavToggleLabel,
+      tooltipText,
+      as: Component,
+      ...props
+    }: NavListItemProps<As>,
     ref: React.ForwardedRef<unknown>,
   ) => {
     const {depth} = React.useContext(SubNavContext)
@@ -162,12 +171,16 @@ const ItemComponent = fixedForwardRef(
     // Render ItemWithSubNav if SubNav is present
     if (subNav && isValidElement(subNav)) {
       return (
-        <ItemWithSubNav
+        <ItemWithSubNav<As>
           subNav={subNav}
           depth={depth}
           defaultOpen={defaultOpen}
+          subNavToggleLabel={subNavToggleLabel}
           tooltipText={tooltipText}
-          style={{'--subitem-depth': depth} as React.CSSProperties}
+          ariaCurrent={ariaCurrent}
+          as={Component}
+          forwardedRef={ref}
+          linkProps={props}
         >
           {childrenWithoutSubNavOrTrailingAction}
         </ItemWithSubNav>
@@ -201,13 +214,26 @@ const Item = Object.assign(ItemComponent, {displayName: 'NavList.Item'})
 // ----------------------------------------------------------------------------
 // ItemWithSubNav (internal)
 
-type ItemWithSubNavProps = {
+type ItemWithSubNavLinkProps<As extends React.ElementType> = Omit<
+  NavListItemProps<As>,
+  'aria-current' | 'as' | 'children' | 'defaultOpen' | 'subNavToggleLabel' | 'tooltipText'
+> & {
+  className?: string
+  id?: string
+  style?: React.CSSProperties
+}
+
+type ItemWithSubNavProps<As extends React.ElementType> = {
   children: React.ReactNode
   subNav: React.ReactNode
   depth: number
   defaultOpen?: boolean
+  subNavToggleLabel?: string
   tooltipText?: string
-  style: React.CSSProperties
+  ariaCurrent?: NavListItemProps['aria-current']
+  as?: As
+  forwardedRef: React.ForwardedRef<unknown>
+  linkProps: ItemWithSubNavLinkProps<As>
 }
 
 const ItemWithSubNavContext = React.createContext<{buttonId: string; subNavId: string; isOpen: boolean}>({
@@ -238,8 +264,20 @@ function hasCurrentNavItem(node: React.ReactNode): boolean {
   return React.Children.toArray(node.props.children).some(hasCurrentNavItem)
 }
 
-function ItemWithSubNav({children, subNav, depth: _depth, defaultOpen, tooltipText, style}: ItemWithSubNavProps) {
-  const buttonId = useId()
+function ItemWithSubNav<As extends React.ElementType = 'a'>({
+  children,
+  subNav,
+  depth,
+  defaultOpen,
+  subNavToggleLabel,
+  tooltipText,
+  ariaCurrent,
+  as: Component,
+  forwardedRef,
+  linkProps,
+}: ItemWithSubNavProps<As>) {
+  const {className, id, style, ...restLinkProps} = linkProps
+  const buttonId = useId(id)
   const subNavId = useId()
 
   // We have to use recursion to check if the current nav item is part of the subnav before initial render
@@ -262,26 +300,61 @@ function ItemWithSubNav({children, subNav, depth: _depth, defaultOpen, tooltipTe
     }
   }, [subNav, buttonId])
 
+  const subItem = (
+    <SubItem>
+      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+      {React.cloneElement(subNav as React.ReactElement<any>, {
+        ref: subNavRef,
+      })}
+    </SubItem>
+  )
+
+  const toggleSubNav = () => setIsOpen(open => !open)
+  const InternalLinkItem: React.ElementType = ActionList.LinkItem
+
   return (
     <ItemWithSubNavContext.Provider value={{buttonId, subNavId, isOpen}}>
-      <ActionList.Item
-        id={buttonId}
-        aria-expanded={isOpen}
-        aria-controls={subNavId}
-        active={!isOpen && containsCurrentItem}
-        onSelect={() => setIsOpen(open => !open)}
-        style={style}
-        data-component="NavList.Item"
-        _PrivateTooltipText={tooltipText}
-      >
-        {children}
-        {/* What happens if the user provides a TrailingVisual? */}
-        <ActionList.TrailingVisual>
-          <ChevronDownIcon className={classes.ExpandIcon} />
-        </ActionList.TrailingVisual>
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-        <SubItem>{React.cloneElement(subNav as React.ReactElement<any>, {ref: subNavRef})}</SubItem>
-      </ActionList.Item>
+      {subNavToggleLabel ? (
+        <InternalLinkItem
+          {...restLinkProps}
+          ref={forwardedRef}
+          as={Component}
+          aria-current={ariaCurrent}
+          id={buttonId}
+          active={(Boolean(ariaCurrent) && ariaCurrent !== 'false') || (!isOpen && containsCurrentItem)}
+          className={className}
+          style={{'--subitem-depth': depth, ...style} as React.CSSProperties}
+          data-component="NavList.Item"
+          _PrivateTooltipText={tooltipText}
+        >
+          {children}
+          <ActionList.TrailingAction
+            aria-controls={subNavId}
+            aria-expanded={isOpen}
+            icon={isOpen ? ChevronUpIcon : ChevronDownIcon}
+            label={subNavToggleLabel}
+            onClick={toggleSubNav}
+          />
+          {subItem}
+        </InternalLinkItem>
+      ) : (
+        <ActionList.Item
+          id={buttonId}
+          aria-expanded={isOpen}
+          aria-controls={subNavId}
+          active={!isOpen && containsCurrentItem}
+          onSelect={toggleSubNav}
+          style={{'--subitem-depth': depth} as React.CSSProperties}
+          data-component="NavList.Item"
+          _PrivateTooltipText={tooltipText}
+        >
+          {children}
+          <ActionList.TrailingVisual>
+            <ChevronDownIcon className={classes.ExpandIcon} />
+          </ActionList.TrailingVisual>
+          {subItem}
+        </ActionList.Item>
+      )}
     </ItemWithSubNavContext.Provider>
   )
 }
@@ -297,7 +370,7 @@ const SubNavContext = React.createContext<{depth: number}>({depth: 0})
 
 // NOTE: SubNav must be a direct child of an Item
 const SubNav = React.forwardRef<HTMLUListElement, NavListSubNavProps>(({children}, forwardedRef) => {
-  const {buttonId, subNavId} = React.useContext(ItemWithSubNavContext)
+  const {buttonId, subNavId, isOpen} = React.useContext(ItemWithSubNavContext)
   const {depth} = React.useContext(SubNavContext)
   if (!buttonId || !subNavId) {
     // eslint-disable-next-line no-console
@@ -317,6 +390,7 @@ const SubNav = React.forwardRef<HTMLUListElement, NavListSubNavProps>(({children
         className={classes.SubGroup}
         id={subNavId}
         aria-labelledby={buttonId}
+        hidden={!isOpen}
         ref={forwardedRef}
         data-component="NavList.SubNav"
       >