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/e2e/components/NavList.test.ts b/e2e/components/NavList.test.ts
index e74bf0e8c06..a63af1b2945 100644
--- a/e2e/components/NavList.test.ts
+++ b/e2e/components/NavList.test.ts
@@ -42,6 +42,48 @@ const stories = [
 ]
 
 test.describe('NavList', () => {
+  for (const colorScheme of ['light', 'dark', 'light_high_contrast']) {
+    test(`linked sub-nav parent keyboard interaction @avt ${colorScheme}`, async ({page}) => {
+      await visit(page, {
+        id: 'components-navlist-features--with-linked-sub-nav-parent',
+        globals: {colorScheme},
+      })
+
+      const link = page.getByRole('link', {name: 'Overview', exact: true})
+      const toggle = page.getByRole('button', {name: 'Toggle overview pages', exact: true})
+      const subNav = page.getByRole('list', {name: 'Overview'})
+      const initialUrl = page.url()
+
+      await expect(link).toHaveAttribute('aria-current', 'page')
+      await expect(toggle).toHaveAttribute('aria-expanded', 'false')
+      await expect(subNav).toBeHidden()
+      await expect(page).toHaveNoViolations()
+
+      await link.focus()
+      await page.keyboard.press('Tab')
+      await expect(toggle).toBeFocused()
+      await page.keyboard.press('Enter')
+      await expect(toggle).toHaveAttribute('aria-expanded', 'true')
+      await expect(subNav).toBeVisible()
+      await expect(page).toHaveURL(initialUrl)
+      await expect(page).toHaveNoViolations()
+
+      await page.keyboard.press('Tab')
+      await expect(page.getByRole('link', {name: 'Review requested'})).toBeFocused()
+      await page.keyboard.press('Shift+Tab')
+      await page.keyboard.press('Space')
+      await expect(toggle).toBeFocused()
+      await expect(toggle).toHaveAttribute('aria-expanded', 'false')
+      await expect(subNav).toBeHidden()
+
+      await page.keyboard.press('Shift+Tab')
+      await expect(link).toBeFocused()
+      await page.keyboard.press('Enter')
+      await expect(page).toHaveURL(`${initialUrl}#`)
+      await expect(toggle).toHaveAttribute('aria-expanded', 'false')
+    })
+  }
+
   for (const story of stories) {
     test.describe(story.title, () => {
       for (const theme of themes) {
diff --git a/packages/react/src/ActionList/ActionList.module.css b/packages/react/src/ActionList/ActionList.module.css
index 7a4a9065c0a..b1076712ddf 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,43 @@
 
 /* button or a tag */
 
+.ActionListItemRow {
+  position: relative;
+  display: flex;
+  border-radius: var(--borderRadius-medium);
+
+  :where(.ActionListItem[data-active='true']) > & {
+    background: var(--control-transparent-bgColor-selected);
+    outline: 2px solid transparent;
+
+    & .ItemLabel {
+      font-weight: var(--base-text-weight-semibold);
+      color: var(--control-fgColor-rest);
+    }
+
+    & .ActionListSubContent::before {
+      visibility: hidden;
+    }
+
+    &::after {
+      @mixin activeIndicatorLine;
+    }
+  }
+
+  @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 f811925983f..53aba1fa5be 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={listSemantics ? null : 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={listSemantics ? null : 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 91826f957ff..c5cff2c32ef 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"},
@@ -101,7 +102,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",
@@ -114,6 +115,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. Requires `href` when rendering the default anchor or using `as=\"a\"`. Custom link components passed through `as` must receive their own navigation props, such as `to`."
+        },
         {
           "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 e4849307520..f67e4a7bedf 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="#" aria-current="page" 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 1fc9e2bcf2f..5570c4b43b9 100644
--- a/packages/react/src/NavList/NavList.test.tsx
+++ b/packages/react/src/NavList/NavList.test.tsx
@@ -271,6 +271,151 @@ 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('rejects a linked parent without a native navigation destination', () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => null)
+    try {
+      expect(() =>
+        renderToStaticMarkup(
+          <NavList>
+            {/* @ts-expect-error exercise invalid JavaScript usage */}
+            <NavList.Item subNavToggleLabel="Toggle overview pages">
+              Overview
+              <NavList.SubNav>
+                <NavList.Item href="/drafts">Drafts</NavList.Item>
+              </NavList.SubNav>
+            </NavList.Item>
+          </NavList>,
+        ),
+      ).toThrow('NavList.Item requires an href when subNavToggleLabel is set and the item renders as an anchor.')
+    } finally {
+      consoleSpy.mockRestore()
+    }
+  })
+
+  it.each([false, true])('styles the current linked parent with defaultOpen=%s', defaultOpen => {
+    const {getByRole, getByText} = render(
+      <NavList>
+        <NavList.Item href="/current" aria-current="page">
+          Current item
+        </NavList.Item>
+        <NavList.Item
+          href="/overview"
+          aria-current="page"
+          subNavToggleLabel="Toggle overview pages"
+          defaultOpen={defaultOpen}
+        >
+          Overview
+          <NavList.SubNav>
+            <NavList.Item href="/drafts">Drafts</NavList.Item>
+          </NavList.SubNav>
+        </NavList.Item>
+      </NavList>,
+    )
+    const currentItem = getByRole('link', {name: 'Current item'}).closest('li')!
+    const row = getByRole('link', {name: 'Overview'}).parentElement!
+    const toggle = getByRole('button', {name: 'Toggle overview pages'})
+    const expectSelectedRow = () => {
+      expect(getComputedStyle(row).backgroundColor).toBe(getComputedStyle(currentItem).backgroundColor)
+      expect(getComputedStyle(row, '::after').content).toBe('""')
+      expect(getComputedStyle(getByText('Overview')).fontWeight).toBe('600')
+      expect(getComputedStyle(getByText('Drafts')).fontWeight).toBe('400')
+    }
+
+    expectSelectedRow()
+    fireEvent.click(toggle)
+    expectSelectedRow()
+  })
+
+  it('only highlights a linked ancestor while its current descendant is collapsed', () => {
+    const {getByRole, getByText} = render(
+      <NavList>
+        <NavList.Item href="/overview" subNavToggleLabel="Toggle overview pages">
+          Overview
+          <NavList.SubNav>
+            <NavList.Item href="/drafts" aria-current="page">
+              Drafts
+            </NavList.Item>
+            <NavList.Item href="/other" subNavToggleLabel="Toggle other pages">
+              Other
+              <NavList.SubNav>
+                <NavList.Item href="/other/nested">Nested</NavList.Item>
+              </NavList.SubNav>
+            </NavList.Item>
+          </NavList.SubNav>
+        </NavList.Item>
+      </NavList>,
+    )
+    const row = getByRole('link', {name: 'Overview'}).parentElement!
+    const otherRow = getByRole('link', {name: 'Other'}).parentElement!
+    const toggle = getByRole('button', {name: 'Toggle overview pages'})
+
+    expect(toggle).toHaveAttribute('aria-expanded', 'true')
+    expect(getComputedStyle(row, '::after').content).toBe('none')
+    fireEvent.click(toggle)
+    expect(getComputedStyle(row, '::after').content).toBe('""')
+    expect(getComputedStyle(otherRow, '::after').content).toBe('none')
+    expect(getComputedStyle(getByText('Other')).fontWeight).toBe('400')
+    fireEvent.click(toggle)
+    expect(getComputedStyle(row, '::after').content).toBe('none')
+  })
+
   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 aa8f1971ca7..d4cd449c536 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'
@@ -18,11 +18,12 @@ import classes from '../ActionList/ActionList.module.css'
 import navListClasses from './NavList.module.css'
 import {flushSync} from 'react-dom'
 import {useSlots} from '../hooks/useSlots'
-import {fixedForwardRef, type PolymorphicProps} from '../utils/modern-polymorphic'
+import {fixedForwardRef, type DistributiveOmit, type PolymorphicProps} from '../utils/modern-polymorphic'
 import HeadingComponent from '../Heading'
 import visuallyHiddenClasses from '../_VisuallyHidden.module.css'
 import type {FCWithSlotMarker} from '../utils/types/Slots'
 import {asSlot} from '../utils/as-slot'
+import {invariant} from '../utils/invariant'
 
 type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
@@ -130,22 +131,35 @@ Heading.__SLOT__ = Symbol('NavList.Heading')
 // ----------------------------------------------------------------------------
 // NavList.Item
 
+type SubNavLinkProps<As extends React.ElementType> =
+  | {subNavToggleLabel?: undefined; href?: string}
+  | {subNavToggleLabel?: string; href: string}
+  | ([As] extends ['a'] ? never : {subNavToggleLabel?: string; as: As; href?: string})
+
 export type NavListItemProps<As extends React.ElementType = React.ElementType> = PolymorphicProps<
   As,
   'a',
   {
     children: React.ReactNode
     defaultOpen?: boolean
-    href?: string
     'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean
     inactiveText?: string
     tooltipText?: string
   }
->
+> &
+  SubNavLinkProps<As>
 
 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)
@@ -164,12 +178,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>
@@ -203,13 +221,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}>({
@@ -240,8 +271,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
@@ -264,26 +307,66 @@ 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
+
+  invariant(
+    !subNavToggleLabel || (Component && Component !== 'a') || typeof restLinkProps.href === 'string',
+    'NavList.Item requires an href when subNavToggleLabel is set and the item renders as an anchor.',
+  )
+
   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>
   )
 }
@@ -299,7 +382,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
@@ -319,6 +402,7 @@ const SubNav = React.forwardRef<HTMLUListElement, NavListSubNavProps>(({children
         className={classes.SubGroup}
         id={subNavId}
         aria-labelledby={buttonId}
+        hidden={!isOpen}
         ref={forwardedRef}
         data-component="NavList.SubNav"
       >
@@ -436,7 +520,7 @@ type GroupItem = {
   leadingVisual?: Icon
   trailingAction?: ActionListTrailingActionProps
   'data-expand-focus-target'?: string
-} & Omit<NavListItemProps, 'children'>
+} & DistributiveOmit<NavListItemProps, 'children'>
 
 export type NavListGroupExpandProps = {
   label?: string
@@ -477,7 +561,7 @@ export const GroupExpand = React.forwardRef<HTMLButtonElement, NavListGroupExpan
                   })
                 }
                 return (
-                  <Item {...rest} key={index} data-expand-focus-target={focusTarget}>
+                  <Item<React.ElementType> {...rest} key={index} data-expand-focus-target={focusTarget}>
                     {LeadingVisualIcon ? (
                       <LeadingVisual>
                         <LeadingVisualIcon />
diff --git a/packages/react/src/__tests__/NavList.types.test.tsx b/packages/react/src/__tests__/NavList.types.test.tsx
new file mode 100644
index 00000000000..5345514e95a
--- /dev/null
+++ b/packages/react/src/__tests__/NavList.types.test.tsx
@@ -0,0 +1,108 @@
+import type {ComponentProps} from 'react'
+import {NavList, type NavListItemProps} from '../NavList/NavList'
+import {ReactRouterLikeLink} from '../Pagination/mocks/ReactRouterLink'
+
+export function shouldRequireHrefForLinkedParents() {
+  // @ts-expect-error linked parents rendered as anchors require href
+  const implicitAnchor = <NavList.Item subNavToggleLabel="Toggle pages">Overview</NavList.Item>
+  const explicitAnchor = (
+    // @ts-expect-error explicit anchors also require href
+    <NavList.Item as="a" subNavToggleLabel="Toggle pages">
+      Overview
+    </NavList.Item>
+  )
+  const undefinedHref = (
+    // @ts-expect-error undefined is not a navigation destination
+    <NavList.Item href={undefined} subNavToggleLabel="Toggle pages">
+      Overview
+    </NavList.Item>
+  )
+  // @ts-expect-error the exported props type also requires href for default anchors
+  const props: NavListItemProps = {children: 'Overview', subNavToggleLabel: 'Toggle pages'}
+  return {implicitAnchor, explicitAnchor, undefinedHref, props}
+}
+
+export function shouldAcceptLinkedParentsWithDestinations() {
+  return (
+    <>
+      <NavList.Item href="/overview" subNavToggleLabel="Toggle pages">
+        Overview
+      </NavList.Item>
+      <NavList.Item as="a" href="/overview" subNavToggleLabel="Toggle pages">
+        Overview
+      </NavList.Item>
+      <NavList.Item as={ReactRouterLikeLink} to="/overview" subNavToggleLabel="Toggle pages">
+        Overview
+      </NavList.Item>
+      <NavList.Item>Toggle-only parent</NavList.Item>
+    </>
+  )
+}
+
+export function shouldRequireCustomLinkNavigationProps() {
+  return (
+    // @ts-expect-error custom router links require their own destination prop
+    <NavList.Item as={ReactRouterLikeLink} subNavToggleLabel="Toggle pages">
+      Overview
+    </NavList.Item>
+  )
+}
+
+export function shouldForwardOptionalToggleLabel(subNavToggleLabel?: string) {
+  return (
+    <>
+      <NavList.Item href="/overview" subNavToggleLabel={subNavToggleLabel}>
+        Overview
+      </NavList.Item>
+      <NavList.Item as={ReactRouterLikeLink} to="/overview" subNavToggleLabel={subNavToggleLabel}>
+        Overview
+      </NavList.Item>
+    </>
+  )
+}
+
+type WrappedLinkProps = Omit<ComponentProps<typeof NavList.Item>, 'href' | 'as' | 'children'> & {
+  to: string
+  label: string
+}
+
+export function shouldForwardComponentProps({to, label, ...rest}: WrappedLinkProps) {
+  return (
+    <>
+      <NavList.Item href={to} {...rest}>
+        {label}
+      </NavList.Item>
+      <NavList.Item as={ReactRouterLikeLink} to={to} {...rest}>
+        {label}
+      </NavList.Item>
+    </>
+  )
+}
+
+type WrappedMenuItemProps = Omit<NavListItemProps, 'children'> & {href: string; label: string}
+
+export function shouldForwardExportedProps({href, label, ...rest}: WrappedMenuItemProps) {
+  return (
+    <NavList.Item {...rest} as={ReactRouterLikeLink} to={href}>
+      {label}
+    </NavList.Item>
+  )
+}
+
+export function shouldForwardPolymorphicComponentProps(
+  props: ComponentProps<typeof NavList.Item>,
+  {label, ...rest}: Omit<WrappedLinkProps, 'to'>,
+) {
+  return (
+    <NavList.Item as={ReactRouterLikeLink} {...props} {...rest}>
+      {label}
+    </NavList.Item>
+  )
+}
+
+export function shouldRejectOptionalToggleLabelWithoutDestination(subNavToggleLabel?: string) {
+  return (
+    // @ts-expect-error a possibly linked native parent still needs a destination
+    <NavList.Item subNavToggleLabel={subNavToggleLabel}>Overview</NavList.Item>
+  )
+}