diff --git a/static/app/components/nav/config.tsx b/static/app/components/nav/config.tsx
new file mode 100644
index 0000000000000..27504b725927b
--- /dev/null
+++ b/static/app/components/nav/config.tsx
@@ -0,0 +1,174 @@
+import type {NavConfig} from 'sentry/components/nav/utils';
+import {
+  IconDashboard,
+  IconGraph,
+  IconIssues,
+  IconLightning,
+  IconProject,
+  IconSearch,
+  IconSettings,
+  IconSiren,
+} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import type {Organization} from 'sentry/types/organization';
+import {getDiscoverLandingUrl} from 'sentry/utils/discover/urls';
+import {MODULE_BASE_URLS} from 'sentry/views/insights/common/utils/useModuleURL';
+import {MODULE_SIDEBAR_TITLE as MODULE_TITLE_HTTP} from 'sentry/views/insights/http/settings';
+import {INSIGHTS_BASE_URL, MODULE_TITLES} from 'sentry/views/insights/settings';
+import {getSearchForIssueGroup, IssueGroup} from 'sentry/views/issueList/utils';
+
+/**
+ * Global nav settings for all Sentry users.
+ * Links are generated per-organization with the proper `/organization/:slug/` prefix.
+ *
+ * To permission-gate certain items, include props to be passed to the `<Feature>` component
+ */
+export function createNavConfig({organization}: {organization: Organization}): NavConfig {
+  const prefix = `organizations/${organization.slug}`;
+  const insightsPrefix = `${prefix}/${INSIGHTS_BASE_URL}`;
+
+  return {
+    main: [
+      {
+        label: t('Issues'),
+        icon: <IconIssues />,
+        submenu: [
+          {
+            label: t('All'),
+            to: `/${prefix}/issues/?query=is:unresolved`,
+          },
+          {
+            label: t('Error & Outage'),
+            to: `/${prefix}/issues/${getSearchForIssueGroup(IssueGroup.ERROR_OUTAGE)}`,
+          },
+          {
+            label: t('Trend'),
+            to: `/${prefix}/issues/${getSearchForIssueGroup(IssueGroup.TREND)}`,
+          },
+          {
+            label: t('Craftsmanship'),
+            to: `/${prefix}/issues/${getSearchForIssueGroup(IssueGroup.CRAFTSMANSHIP)}`,
+          },
+          {
+            label: t('Security'),
+            to: `/${prefix}/issues/${getSearchForIssueGroup(IssueGroup.SECURITY)}`,
+          },
+          {label: t('Feedback'), to: `/${prefix}/feedback/`},
+        ],
+      },
+      {label: t('Projects'), to: `/${prefix}/projects/`, icon: <IconProject />},
+      {
+        label: t('Explore'),
+        icon: <IconSearch />,
+        submenu: [
+          {
+            label: t('Traces'),
+            to: `/${prefix}/traces/`,
+            feature: {features: 'performance-trace-explorer'},
+          },
+          {
+            label: t('Metrics'),
+            to: `/${prefix}/metrics/`,
+            feature: {features: 'custom-metrics'},
+          },
+          {
+            label: t('Profiles'),
+            to: `/${prefix}/profiling/`,
+            feature: {
+              features: 'profiling',
+              hookName: 'feature-disabled:profiling-sidebar-item',
+              requireAll: false,
+            },
+          },
+          {
+            label: t('Replays'),
+            to: `/${prefix}/replays/`,
+            feature: {
+              features: 'session-replay-ui',
+              hookName: 'feature-disabled:replay-sidebar-item',
+            },
+          },
+          {
+            label: t('Discover'),
+            to: getDiscoverLandingUrl(organization),
+            feature: {
+              features: 'discover-basic',
+              hookName: 'feature-disabled:discover2-sidebar-item',
+            },
+          },
+          {label: t('Releases'), to: `/${prefix}/releases/`},
+          {label: t('Crons'), to: `/${prefix}/crons/`},
+        ],
+      },
+      {
+        label: t('Insights'),
+        icon: <IconGraph />,
+        feature: {features: 'insights-entry-points'},
+        submenu: [
+          {
+            label: MODULE_TITLE_HTTP,
+            to: `/${insightsPrefix}/${MODULE_BASE_URLS.http}/`,
+          },
+          {label: MODULE_TITLES.db, to: `/${insightsPrefix}/${MODULE_BASE_URLS.db}/`},
+          {
+            label: MODULE_TITLES.resource,
+            to: `/${insightsPrefix}/${MODULE_BASE_URLS.resource}/`,
+          },
+          {
+            label: MODULE_TITLES.app_start,
+            to: `/${insightsPrefix}/${MODULE_BASE_URLS.app_start}/`,
+          },
+          {
+            label: MODULE_TITLES['mobile-screens'],
+            to: `/${insightsPrefix}/${MODULE_BASE_URLS['mobile-screens']}/`,
+            feature: {features: 'insights-mobile-screens-module'},
+          },
+          {
+            label: MODULE_TITLES.vital,
+            to: `/${insightsPrefix}/${MODULE_BASE_URLS.vital}/`,
+          },
+          {
+            label: MODULE_TITLES.cache,
+            to: `/${insightsPrefix}/${MODULE_BASE_URLS.cache}/`,
+          },
+          {
+            label: MODULE_TITLES.queue,
+            to: `/${insightsPrefix}/${MODULE_BASE_URLS.queue}/`,
+          },
+          {
+            label: MODULE_TITLES.ai,
+            to: `/${insightsPrefix}/${MODULE_BASE_URLS.ai}/`,
+            feature: {features: 'insights-entry-points'},
+          },
+        ],
+      },
+      {
+        label: t('Perf.'),
+        to: '/performance/',
+        icon: <IconLightning />,
+        feature: {
+          features: 'performance-view',
+          hookName: 'feature-disabled:performance-sidebar-item',
+        },
+      },
+      {
+        label: t('Boards'),
+        to: '/dashboards/',
+        icon: <IconDashboard />,
+        feature: {
+          features: ['discover', 'discover-query', 'dashboards-basic', 'dashboards-edit'],
+          hookName: 'feature-disabled:dashboards-sidebar-item',
+          requireAll: false,
+        },
+      },
+      {label: t('Alerts'), to: `/${prefix}/alerts/rules/`, icon: <IconSiren />},
+    ],
+    footer: [
+      {
+        label: t('Settings'),
+        to: `/settings/${organization.slug}/`,
+        icon: <IconSettings />,
+      },
+    ],
+  };
+}
diff --git a/static/app/components/nav/context.tsx b/static/app/components/nav/context.tsx
new file mode 100644
index 0000000000000..33a99ecf0d979
--- /dev/null
+++ b/static/app/components/nav/context.tsx
@@ -0,0 +1,61 @@
+import {createContext, useContext, useMemo} from 'react';
+
+import {createNavConfig} from 'sentry/components/nav/config';
+import type {
+  NavConfig,
+  NavItemLayout,
+  NavSidebarItem,
+  NavSubmenuItem,
+} from 'sentry/components/nav/utils';
+import {isNavItemActive, isSubmenuItemActive} from 'sentry/components/nav/utils';
+import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
+
+export interface NavContext {
+  /** Raw config for entire nav items */
+  config: Readonly<NavConfig>;
+  /** Currently active submenu items, if any */
+  submenu?: Readonly<NavItemLayout<NavSubmenuItem>>;
+}
+
+const NavContext = createContext<NavContext>({config: {main: []}});
+
+export function useNavContext(): NavContext {
+  const navContext = useContext(NavContext);
+  return navContext;
+}
+
+export function NavContextProvider({children}) {
+  const organization = useOrganization();
+  const location = useLocation();
+  /** Raw nav configuration values */
+  const config = useMemo(() => createNavConfig({organization}), [organization]);
+  /**
+   * Active submenu items derived from the nav config and current `location`.
+   * These are returned in a normalized layout format for ease of use.
+   */
+  const submenu = useMemo<NavContext['submenu']>(() => {
+    for (const item of config.main) {
+      if (isNavItemActive(item, location) || isSubmenuItemActive(item, location)) {
+        return normalizeSubmenu(item.submenu);
+      }
+    }
+    if (config.footer) {
+      for (const item of config.footer) {
+        if (isNavItemActive(item, location) || isSubmenuItemActive(item, location)) {
+          return normalizeSubmenu(item.submenu);
+        }
+      }
+    }
+    return undefined;
+  }, [config, location]);
+
+  return <NavContext.Provider value={{config, submenu}}>{children}</NavContext.Provider>;
+}
+
+const normalizeSubmenu = (submenu: NavSidebarItem['submenu']): NavContext['submenu'] => {
+  if (Array.isArray(submenu)) {
+    return {main: submenu};
+  }
+  return submenu;
+};
diff --git a/static/app/components/nav/index.spec.tsx b/static/app/components/nav/index.spec.tsx
new file mode 100644
index 0000000000000..0ca7e1efb43bd
--- /dev/null
+++ b/static/app/components/nav/index.spec.tsx
@@ -0,0 +1,168 @@
+import {LocationFixture} from 'sentry-fixture/locationFixture';
+import {OrganizationFixture} from 'sentry-fixture/organization';
+import {RouterFixture} from 'sentry-fixture/routerFixture';
+
+import {getAllByRole, render, screen} from 'sentry-test/reactTestingLibrary';
+
+import Nav from 'sentry/components/nav';
+
+const ALL_AVAILABLE_FEATURES = [
+  'insights-entry-points',
+  'discover',
+  'discover-basic',
+  'discover-query',
+  'dashboards-basic',
+  'dashboards-edit',
+  'custom-metrics',
+  'user-feedback-ui',
+  'session-replay-ui',
+  'performance-view',
+  'performance-trace-explorer',
+  'starfish-mobile-ui-module',
+  'profiling',
+];
+
+describe('Nav', function () {
+  describe('default', function () {
+    beforeEach(() => {
+      render(<Nav />, {
+        router: RouterFixture({
+          location: LocationFixture({pathname: '/organizations/org-slug/issues/'}),
+        }),
+        organization: OrganizationFixture({features: ALL_AVAILABLE_FEATURES}),
+      });
+    });
+    it('renders primary navigation', async function () {
+      expect(
+        await screen.findByRole('navigation', {name: 'Primary Navigation'})
+      ).toBeInTheDocument();
+    });
+    it('renders secondary navigation', async function () {
+      expect(
+        await screen.findByRole('navigation', {name: 'Secondary Navigation'})
+      ).toBeInTheDocument();
+    });
+
+    it('renders expected primary nav items', function () {
+      const links = getAllByRole(
+        screen.getByRole('navigation', {name: 'Primary Navigation'}),
+        'link'
+      );
+      expect(links).toHaveLength(8);
+
+      [
+        'Issues',
+        'Projects',
+        'Explore',
+        'Insights',
+        'Perf.',
+        'Boards',
+        'Alerts',
+        'Settings',
+      ].forEach((title, index) => {
+        expect(links[index]).toHaveAccessibleName(title);
+      });
+    });
+  });
+
+  describe('issues', function () {
+    beforeEach(() => {
+      render(<Nav />, {
+        router: RouterFixture({
+          location: LocationFixture({
+            pathname: '/organizations/org-slug/issues/',
+            search: '?query=is:unresolved',
+          }),
+        }),
+        organization: OrganizationFixture({features: ALL_AVAILABLE_FEATURES}),
+      });
+    });
+
+    it('renders secondary navigation', async function () {
+      expect(
+        await screen.findByRole('navigation', {name: 'Secondary Navigation'})
+      ).toBeInTheDocument();
+    });
+
+    it('includes expected submenu items', function () {
+      const container = screen.getByRole('navigation', {name: 'Secondary Navigation'});
+      const links = getAllByRole(container, 'link');
+      expect(links).toHaveLength(6);
+
+      ['All', 'Error & Outage', 'Trend', 'Craftsmanship', 'Security', 'Feedback'].forEach(
+        (title, index) => {
+          expect(links[index]).toHaveAccessibleName(title);
+        }
+      );
+    });
+  });
+
+  describe('insights', function () {
+    beforeEach(() => {
+      render(<Nav />, {
+        router: RouterFixture({
+          location: LocationFixture({pathname: '/organizations/org-slug/insights/http/'}),
+        }),
+        organization: OrganizationFixture({features: ALL_AVAILABLE_FEATURES}),
+      });
+    });
+
+    it('renders secondary navigation', async function () {
+      expect(
+        await screen.findByRole('navigation', {name: 'Secondary Navigation'})
+      ).toBeInTheDocument();
+    });
+
+    it('includes expected submenu items', function () {
+      const container = screen.getByRole('navigation', {name: 'Secondary Navigation'});
+      const links = getAllByRole(container, 'link');
+      expect(links).toHaveLength(8);
+      [
+        'Requests',
+        'Queries',
+        'Assets',
+        'App Starts',
+        'Web Vitals',
+        'Caches',
+        'Queues',
+        'LLM Monitoring',
+      ].forEach((title, index) => {
+        expect(links[index]).toHaveAccessibleName(title);
+      });
+    });
+  });
+
+  describe('explore', function () {
+    beforeEach(() => {
+      render(<Nav />, {
+        router: RouterFixture({
+          location: LocationFixture({pathname: '/organizations/org-slug/traces/'}),
+        }),
+        organization: OrganizationFixture({features: ALL_AVAILABLE_FEATURES}),
+      });
+    });
+
+    it('renders secondary navigation', async function () {
+      expect(
+        await screen.findByRole('navigation', {name: 'Secondary Navigation'})
+      ).toBeInTheDocument();
+    });
+
+    it('includes expected submenu items', function () {
+      const container = screen.getByRole('navigation', {name: 'Secondary Navigation'});
+      const links = getAllByRole(container, 'link');
+      expect(links).toHaveLength(7);
+      [
+        'Traces',
+        'Metrics',
+        'Profiles',
+        'Replays',
+        'Discover',
+        'Releases',
+        'Crons',
+      ].forEach((title, index) => {
+        expect(links[index]).toHaveAccessibleName(title);
+      });
+    });
+  });
+});
diff --git a/static/app/components/nav/index.tsx b/static/app/components/nav/index.tsx
new file mode 100644
index 0000000000000..676624e08b927
--- /dev/null
+++ b/static/app/components/nav/index.tsx
@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+
+import {NavContextProvider} from 'sentry/components/nav/context';
+import MobileTopbar from 'sentry/components/nav/mobileTopbar';
+import Sidebar from 'sentry/components/nav/sidebar';
+import {useBreakpoints} from 'sentry/utils/metrics/useBreakpoints';
+
+function Nav() {
+  const screen = useBreakpoints();
+
+  return (
+    <NavContextProvider>
+      <NavContainer>{screen.medium ? <Sidebar /> : <MobileTopbar />}</NavContainer>
+    </NavContextProvider>
+  );
+}
+
+const NavContainer = styled('div')`
+  display: flex;
+  position: sticky;
+  top: 0;
+  z-index: ${p => p.theme.zIndex.sidebarPanel};
+
+  @media screen and (min-width: ${p => p.theme.breakpoints.medium}) {
+    bottom: 0;
+    height: 100vh;
+    height: 100dvh;
+  }
+`;
+
+export default Nav;
diff --git a/static/app/components/nav/mobileTopbar.tsx b/static/app/components/nav/mobileTopbar.tsx
new file mode 100644
index 0000000000000..50d9e76b8d362
--- /dev/null
+++ b/static/app/components/nav/mobileTopbar.tsx
@@ -0,0 +1,122 @@
+import {useCallback, useEffect, useLayoutEffect, useState} from 'react';
+import {createPortal} from 'react-dom';
+import styled from '@emotion/styled';
+
+import {SidebarItems} from 'sentry/components/nav/sidebar';
+import {IconClose, IconMenu, IconSentry} from 'sentry/icons';
+import {space} from 'sentry/styles/space';
+import theme from 'sentry/utils/theme';
+import {useLocation} from 'sentry/utils/useLocation';
+
+type NavView = 'primary' | 'secondary' | 'closed';
+
+function MobileTopbar() {
+  const location = useLocation();
+  const [view, setView] = useState<NavView>('closed');
+  /** Sync menu state with `body` attributes */
+  useLayoutEffect(() => {
+    updateNavStyleAttributes(view);
+  }, [view]);
+  /** Automatically close the menu after any navigation */
+  useEffect(() => {
+    setView('closed');
+  }, [location.pathname]);
+  const handleClick = useCallback(() => {
+    setView(v => (v === 'closed' ? 'primary' : 'closed'));
+  }, [setView]);
+
+  return (
+    <Topbar>
+      <a href="/">
+        <IconSentry />
+      </a>
+      <button onClick={handleClick}>
+        {view === 'closed' ? <IconMenu width={16} /> : <IconClose width={16} />}
+      </button>
+      {view !== 'closed' ? (
+        <OverlayPortal>
+          <SidebarItems />
+        </OverlayPortal>
+      ) : null}
+    </Topbar>
+  );
+}
+
+export default MobileTopbar;
+
+/** When the mobile menu opens, set the main content to `inert` and disable `body` scrolling */
+function updateNavStyleAttributes(view: NavView) {
+  const mainContent = document.getElementById('main');
+  if (!mainContent) {
+    throw new Error(
+      'Unable to match "#main" element. Please add `id="main"` to the element which wraps the app content.'
+    );
+  }
+
+  if (view !== 'closed') {
+    mainContent.setAttribute('inert', '');
+    document.body.style.setProperty('overflow', 'hidden');
+  } else {
+    mainContent.removeAttribute('inert');
+    document.body.style.removeProperty('overflow');
+  }
+}
+
+function OverlayPortal({children}) {
+  return createPortal(<Overlay>{children}</Overlay>, document.body);
+}
+
+const Topbar = styled('div')`
+  height: 40px;
+  width: 100vw;
+  padding: ${space(0.5)} ${space(1.5)} ${space(0.5)} ${space(1)};
+  border-bottom: 1px solid ${p => p.theme.translucentGray100};
+  background: #3e2648;
+  background: linear-gradient(180deg, #3e2648 0%, #442c4e 100%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: ${theme.zIndex.sidebar};
+
+  svg {
+    display: block;
+    width: var(--size);
+    height: var(--size);
+    color: currentColor;
+  }
+  button {
+    all: initial;
+    --size: ${space(2)};
+  }
+  a {
+    --size: ${space(3)};
+  }
+  a,
+  button {
+    color: rgba(255, 255, 255, 0.85);
+    padding: ${space(1)};
+    margin: -${space(1)};
+    cursor: pointer;
+
+    &:hover {
+      color: white;
+    }
+  }
+`;
+
+const Overlay = styled('div')`
+  position: fixed;
+  top: 40px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  background: ${p => p.theme.surface300};
+  z-index: ${p => p.theme.zIndex.modal};
+  --color: ${p => p.theme.textColor};
+  --color-hover: ${p => p.theme.activeText};
+`;
diff --git a/static/app/components/nav/sidebar.tsx b/static/app/components/nav/sidebar.tsx
new file mode 100644
index 0000000000000..c775c2403f058
--- /dev/null
+++ b/static/app/components/nav/sidebar.tsx
@@ -0,0 +1,222 @@
+import {Fragment} from 'react';
+import styled from '@emotion/styled';
+import {motion} from 'framer-motion';
+
+import Feature from 'sentry/components/acl/feature';
+import OrganizationAvatar from 'sentry/components/avatar/organizationAvatar';
+import Link from 'sentry/components/links/link';
+import {useNavContext} from 'sentry/components/nav/context';
+import Submenu from 'sentry/components/nav/submenu';
+import {useNavIndicator} from 'sentry/components/nav/useNavIndicator';
+import {
+  isNavItemActive,
+  isNonEmptyArray,
+  isSubmenuItemActive,
+  makeLocationDescriptorFromTo,
+  type NavSidebarItem,
+  resolveNavItemTo,
+} from 'sentry/components/nav/utils';
+import {space} from 'sentry/styles/space';
+import theme from 'sentry/utils/theme';
+import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
+
+function Sidebar() {
+  const organization = useOrganization();
+
+  return (
+    <Fragment>
+      <SidebarWrapper role="navigation" aria-label="Primary Navigation">
+        <SidebarHeader>
+          <OrganizationAvatar organization={organization} size={32} />
+        </SidebarHeader>
+        <SidebarItems />
+      </SidebarWrapper>
+      <Submenu />
+    </Fragment>
+  );
+}
+
+export default Sidebar;
+
+export function SidebarItems() {
+  const {config} = useNavContext();
+  return (
+    <Fragment>
+      <SidebarBody>
+        {config.main.map(item => (
+          <SidebarItem key={item.label} item={item} />
+        ))}
+      </SidebarBody>
+      {isNonEmptyArray(config.footer) && (
+        <SidebarFooter>
+          {config.footer.map(item => (
+            <SidebarItem key={item.label} item={item} />
+          ))}
+        </SidebarFooter>
+      )}
+    </Fragment>
+  );
+}
+
+const SidebarWrapper = styled('div')`
+  height: 40px;
+  width: 100vw;
+  padding: ${space(2)} 0;
+  border-right: 1px solid ${theme.translucentGray100};
+  /* these colors should be moved to the "theme" object */
+  background: #3e2648;
+  background: linear-gradient(180deg, #3e2648 0%, #442c4e 100%);
+  display: flex;
+  flex-direction: column;
+  z-index: ${theme.zIndex.sidebar};
+
+  @media screen and (min-width: ${p => p.theme.breakpoints.medium}) {
+    height: unset;
+    width: 74px;
+  }
+`;
+
+const SidebarItemList = styled('ul')`
+  position: relative;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-top: ${space(1)};
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  color: rgba(255, 255, 255, 0.85);
+
+  @media screen and (min-width: ${p => p.theme.breakpoints.medium}) {
+    gap: ${space(1)};
+  }
+`;
+
+function SidebarItem({item}: {item: NavSidebarItem}) {
+  const location = useLocation();
+  const isActive = isNavItemActive(item, location);
+  const isSubmenuActive = isSubmenuItemActive(item, location);
+  const _to = resolveNavItemTo(item);
+  const to = _to ? makeLocationDescriptorFromTo(_to) : '#';
+
+  const FeatureGuard = item.feature ? Feature : Fragment;
+  const featureGuardProps: any = item.feature ?? {};
+
+  return (
+    <FeatureGuard {...featureGuardProps}>
+      <SidebarItemWrapper>
+        <Link
+          to={to}
+          className={isActive || isSubmenuActive ? 'active' : undefined}
+          aria-current={isActive ? 'page' : undefined}
+        >
+          {item.icon}
+          <span>{item.label}</span>
+        </Link>
+      </SidebarItemWrapper>
+    </FeatureGuard>
+  );
+}
+
+const SidebarItemWrapper = styled('li')`
+  svg {
+    --size: 14px;
+    width: var(--size);
+    height: var(--size);
+
+    @media (min-width: ${p => p.theme.breakpoints.medium}) {
+      --size: 18px;
+      padding-top: ${space(0.5)};
+    }
+  }
+  a {
+    display: flex;
+    flex-direction: row;
+    height: 32px;
+    gap: ${space(1.5)};
+    align-items: center;
+    padding: 0 ${space(1.5)};
+    color: var(--color, currentColor);
+    font-size: ${theme.fontSizeMedium};
+    font-weight: ${theme.fontWeightNormal};
+    line-height: 177.75%;
+    border: 1px solid transparent;
+
+    &:hover {
+      color: var(--color-hover, ${theme.white});
+    }
+
+    &.active {
+      color: var(--color-hover, ${theme.white});
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+    }
+
+    & > * {
+      pointer-events: none;
+    }
+
+    @media (min-width: ${p => p.theme.breakpoints.medium}) {
+      flex-direction: column;
+      justify-content: center;
+      height: 52px;
+      padding: ${space(0.5)} ${space(0.75)};
+      border-radius: ${theme.borderRadius};
+      font-size: ${theme.fontSizeExtraSmall};
+      margin-inline: ${space(1)};
+      gap: ${space(0.5)};
+    }
+  }
+`;
+
+const SidebarIndicator = styled(motion.span)`
+  position: absolute;
+  left: 0;
+  right: 0;
+  opacity: 0;
+  pointer-events: none;
+  margin-inline: ${space(1)};
+  width: 58px;
+  height: 52px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: ${theme.borderRadius};
+`;
+
+const SidebarFooterWrapper = styled('div')`
+  position: relative;
+  border-top: 1px solid ${theme.translucentGray200};
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  padding-bottom: ${space(0.5)};
+  margin-top: auto;
+`;
+
+const SidebarHeader = styled('header')`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin-bottom: ${space(1.5)};
+`;
+
+function SidebarBody({children}) {
+  const {indicatorProps, containerProps} = useNavIndicator();
+  // div wrapper is needed to for indicator positioning
+  return (
+    <div>
+      <SidebarIndicator {...indicatorProps} />
+      <SidebarItemList {...containerProps}>{children}</SidebarItemList>
+    </div>
+  );
+}
+
+function SidebarFooter({children}) {
+  const {indicatorProps, containerProps} = useNavIndicator();
+  return (
+    <SidebarFooterWrapper>
+      <SidebarIndicator {...indicatorProps} />
+      <SidebarItemList {...containerProps}>{children}</SidebarItemList>
+    </SidebarFooterWrapper>
+  );
+}
diff --git a/static/app/components/nav/submenu.tsx b/static/app/components/nav/submenu.tsx
new file mode 100644
index 0000000000000..8b4f6ffabb20a
--- /dev/null
+++ b/static/app/components/nav/submenu.tsx
@@ -0,0 +1,158 @@
+import {Fragment} from 'react';
+import styled from '@emotion/styled';
+import {motion} from 'framer-motion';
+
+import Feature from 'sentry/components/acl/feature';
+import Link from 'sentry/components/links/link';
+import {useNavContext} from 'sentry/components/nav/context';
+import {useNavIndicator} from 'sentry/components/nav/useNavIndicator';
+import type {NavSubmenuItem} from 'sentry/components/nav/utils';
+import {
+  isNavItemActive,
+  isNonEmptyArray,
+  makeLocationDescriptorFromTo,
+} from 'sentry/components/nav/utils';
+import {space} from 'sentry/styles/space';
+import theme from 'sentry/utils/theme';
+import {useLocation} from 'sentry/utils/useLocation';
+
+function Submenu() {
+  const nav = useNavContext();
+  if (!nav.submenu) {
+    return null;
+  }
+
+  return (
+    <SubmenuWrapper role="navigation" aria-label="Secondary Navigation">
+      <SubmenuBody>
+        {nav.submenu.main.map(item => (
+          <SubmenuItem key={item.label} item={item} />
+        ))}
+      </SubmenuBody>
+      {isNonEmptyArray(nav.submenu.footer) && (
+        <SubmenuFooter>
+          {nav.submenu.footer.map(item => (
+            <SubmenuItem key={item.label} item={item} />
+          ))}
+        </SubmenuFooter>
+      )}
+    </SubmenuWrapper>
+  );
+}
+
+export default Submenu;
+
+const SubmenuWrapper = styled(motion.div)`
+  position: relative;
+  border-right: 1px solid ${theme.translucentGray200};
+  background: ${theme.surface300};
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  flex-direction: column;
+  width: 150px;
+  z-index: ${theme.zIndex.sidebarPanel};
+`;
+
+function SubmenuItem({item}: {item: NavSubmenuItem}) {
+  const location = useLocation();
+  const isActive = isNavItemActive(item, location);
+  const to = makeLocationDescriptorFromTo(item.to);
+
+  const FeatureGuard = item.feature ? Feature : Fragment;
+  const featureGuardProps: any = item.feature ?? {};
+
+  return (
+    <FeatureGuard {...featureGuardProps}>
+      <SubmenuItemWrapper>
+        <Link
+          to={to}
+          className={isActive ? 'active' : undefined}
+          aria-current={isActive ? 'page' : undefined}
+        >
+          {item.label}
+        </Link>
+      </SubmenuItemWrapper>
+    </FeatureGuard>
+  );
+}
+
+const SubmenuItemList = styled('ul')`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-top: ${space(1)};
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  color: ${theme.gray400};
+`;
+
+const SubmenuItemWrapper = styled('li')`
+  a {
+    display: flex;
+    padding: 5px ${space(1.5)};
+    height: 32px;
+    align-items: center;
+    color: inherit;
+    font-size: ${theme.fontSizeMedium};
+    font-weight: ${theme.fontWeightNormal};
+    line-height: 177.75%;
+    margin-inline: ${space(1)};
+    border: 1px solid transparent;
+    border-radius: ${theme.borderRadius};
+
+    &:hover {
+      color: ${theme.gray500};
+      /* background: rgba(62, 52, 70, 0.09); */
+    }
+
+    &.active {
+      color: ${theme.gray500};
+      background: rgba(62, 52, 70, 0.09);
+      border: 1px solid ${theme.translucentGray100};
+    }
+  }
+`;
+
+const SubmenuIndicator = styled(motion.span)`
+  position: absolute;
+  left: 0;
+  right: 0;
+  opacity: 0;
+  pointer-events: none;
+  margin-inline: ${space(1)};
+  height: 32px;
+  background: rgba(62, 52, 70, 0.09);
+  border-radius: ${theme.borderRadius};
+`;
+
+const SubmenuFooterWrapper = styled('div')`
+  position: relative;
+  border-top: 1px solid ${theme.translucentGray200};
+  background: ${theme.surface300};
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  padding-block: ${space(1)};
+`;
+
+function SubmenuBody({children}) {
+  const {indicatorProps, containerProps} = useNavIndicator();
+  return (
+    <div>
+      <SubmenuIndicator {...indicatorProps} />
+      <SubmenuItemList {...containerProps}>{children}</SubmenuItemList>
+    </div>
+  );
+}
+
+function SubmenuFooter({children}) {
+  const {indicatorProps, containerProps} = useNavIndicator();
+  return (
+    <SubmenuFooterWrapper>
+      <SubmenuIndicator {...indicatorProps} />
+      <SubmenuItemList {...containerProps}>{children}</SubmenuItemList>
+    </SubmenuFooterWrapper>
+  );
+}
diff --git a/static/app/components/nav/useNavIndicator.tsx b/static/app/components/nav/useNavIndicator.tsx
new file mode 100644
index 0000000000000..752063944cbff
--- /dev/null
+++ b/static/app/components/nav/useNavIndicator.tsx
@@ -0,0 +1,66 @@
+import {
+  type ComponentProps,
+  type HTMLAttributes,
+  type PointerEvent,
+  useCallback,
+} from 'react';
+import {useFocusWithin, useHover} from '@react-aria/interactions';
+import {mergeProps} from '@react-aria/utils';
+import {type motion, useMotionValue, useReducedMotion, useSpring} from 'framer-motion';
+
+export interface IndicatorResult {
+  containerProps: HTMLAttributes<HTMLUListElement>;
+  indicatorProps: ComponentProps<typeof motion.span>;
+}
+
+export function useNavIndicator(): IndicatorResult {
+  const prefersReducedMotion = useReducedMotion();
+  const ty = useMotionValue(0);
+  const y = useSpring(
+    ty,
+    prefersReducedMotion
+      ? {duration: 0}
+      : {
+          mass: 0.5,
+          damping: 15,
+          stiffness: 200,
+          restDelta: 0.05,
+        }
+  );
+  const {isHovered, hoverProps} = useHover({});
+  const {focusWithinProps} = useFocusWithin({});
+
+  const handlePointerMove = useCallback(
+    (e: PointerEvent<HTMLUListElement>) => {
+      if (e.target instanceof HTMLAnchorElement) {
+        ty.set(e.target.offsetTop);
+        return;
+      }
+    },
+    [ty]
+  );
+
+  const handlePointerEnter = useCallback(
+    (e: PointerEvent<HTMLUListElement>) => {
+      if (e.target instanceof HTMLUListElement) {
+        y.jump(e.target.querySelector('a')!.offsetTop);
+      } else if (e.target instanceof HTMLElement) {
+        y.jump(e.target.offsetTop);
+      }
+    },
+    [y]
+  );
+
+  return {
+    containerProps: mergeProps(hoverProps, focusWithinProps, {
+      onPointerEnter: handlePointerEnter,
+      onPointerMove: handlePointerMove,
+    }),
+    indicatorProps: {
+      'aria-hidden': 'true',
+      style: {y},
+      animate: {opacity: isHovered ? 1 : 0},
+      transition: {duration: 0.2},
+    },
+  };
+}
diff --git a/static/app/components/nav/utils.tsx b/static/app/components/nav/utils.tsx
new file mode 100644
index 0000000000000..448d3e4a82121
--- /dev/null
+++ b/static/app/components/nav/utils.tsx
@@ -0,0 +1,170 @@
+import type {ComponentProps} from 'react';
+import type {LocationDescriptor} from 'history';
+
+import type Feature from 'sentry/components/acl/feature';
+import {isItemActive} from 'sentry/components/sidebar/sidebarItem';
+import {SIDEBAR_NAVIGATION_SOURCE} from 'sentry/components/sidebar/utils';
+import normalizeUrl from 'sentry/utils/url/normalizeUrl';
+import type {useLocation} from 'sentry/utils/useLocation';
+
+/** NavItem is the base class for both SidebarItem and SubmenuItem  */
+interface NavItem {
+  /** User-facing item label, surfaced in the UI. Should be translated! */
+  label: string;
+  /** Optionally, props which should be passed to a wrapping `<Feature>` guard */
+  feature?: Omit<ComponentProps<typeof Feature>, 'children'>;
+}
+
+/** NavItems are displayed in either `main` and `footer` sections */
+export interface NavItemLayout<Item extends NavSidebarItem | NavSubmenuItem> {
+  main: Item[];
+  footer?: Item[];
+}
+
+/** SidebarItem is a top-level NavItem which is always displayed in the app sidebar */
+export interface NavSidebarItem extends NavItem {
+  /** The icon to render in the sidebar */
+  icon: JSX.Element;
+  /** Optionally, the submenu items to display when this SidebarItem is active */
+  submenu?: NavSubmenuItem[] | NavItemLayout<NavSubmenuItem>;
+  /**
+   * The pathname (including `search` params) to navigate to when the item is clicked.
+   * Defaults to the `to` property of the first `SubmenuItem` if excluded.
+   */
+  to?: string;
+}
+
+/** SubmenuItem is a secondary NavItem which is only displayed when its parent SidebarItem is active */
+export interface NavSubmenuItem extends NavItem {
+  /**
+   * The pathname (including `search` params) to navigate to when the item is clicked.
+   */
+  to: string;
+}
+
+export type NavConfig = NavItemLayout<NavSidebarItem>;
+
+export type NavigationItemStatus = 'inactive' | 'active' | 'active-parent';
+
+/** Determine if a given SidebarItem or SubmenuItem is active */
+export function isNavItemActive(
+  item: NavSidebarItem | NavSubmenuItem,
+  location: ReturnType<typeof useLocation>
+): boolean {
+  const to = resolveNavItemTo(item);
+  if (!to) {
+    return false;
+  }
+
+  /**
+   * Issue submenu is special cased because it is matched based on query params
+   * rather than the pathname.
+   */
+  if (
+    location.pathname.includes('/issues/') &&
+    to.includes('/issues/') &&
+    to.includes('query=')
+  ) {
+    if (location.search) {
+      return hasMatchingQueryParam({to, label: item.label}, location);
+    }
+    return item.label === 'All';
+  }
+
+  const normalizedTo = normalizeUrl(to);
+  const normalizedCurrent = normalizeUrl(location.pathname);
+  // Shortcut for exact matches
+  if (normalizedTo === normalizedCurrent) {
+    return true;
+  }
+  // Fallback to legacy nav logic
+  return isItemActive({to, label: item.label});
+}
+
+export function isSubmenuItemActive(
+  item: NavSidebarItem,
+  location: ReturnType<typeof useLocation>
+): boolean {
+  if (!item.submenu) {
+    return false;
+  }
+  if (isNonEmptyArray(item.submenu)) {
+    return item.submenu.some(subitem => isNavItemActive(subitem, location));
+  }
+  return (
+    item.submenu.main.some(subitem => isNavItemActive(subitem, location)) ||
+    item.submenu.footer?.some(subitem => isNavItemActive(subitem, location)) ||
+    false
+  );
+}
+
+/** Creates a `LocationDescriptor` from a URL string that may contain search params */
+export function makeLocationDescriptorFromTo(to: string): LocationDescriptor {
+  const [pathname, search] = to.split('?');
+
+  return {
+    pathname,
+    search: search ? `?${search}` : undefined,
+    state: {source: SIDEBAR_NAVIGATION_SOURCE},
+  };
+}
+
+export function isNonEmptyArray(item: unknown): item is any[] {
+  return Array.isArray(item) && item.length > 0;
+}
+
+/** SidebarItem `to` can be derived from the first submenu item if necessary */
+export function resolveNavItemTo(
+  item: NavSidebarItem | NavSubmenuItem
+): string | undefined {
+  if (item.to) {
+    return item.to;
+  }
+  if (isSidebarItem(item) && isNonEmptyArray(item.submenu)) {
+    return item.submenu[0].to;
+  }
+  return undefined;
+}
+
+/**
+ * Unique logic for query param matches.
+ *
+ * `location` might have additional query params,
+ * but it considered active if it contains *all* of the params in `item`.
+ */
+function hasMatchingQueryParam(
+  item: Required<Pick<NavSidebarItem | NavSubmenuItem, 'to' | 'label'>>,
+  location: ReturnType<typeof useLocation>
+): boolean {
+  if (location.search.length === 0) {
+    return false;
+  }
+  if (item.to.includes('?')) {
+    const search = new URLSearchParams(location.search);
+    const itemSearch = new URLSearchParams(item.to.split('?').at(-1));
+    const itemQuery = itemSearch.get('query');
+    const query = search.get('query');
+    /**
+     * The "Issues / All" tab is a special case!
+     * It is considered active if no other queries are.
+     */
+    if (item?.label === 'All') {
+      return !query && !itemQuery;
+    }
+    if (itemQuery && query) {
+      let match = false;
+      for (const key of itemQuery?.split(' ')) {
+        match = query.includes(key);
+        if (!match) {
+          continue;
+        }
+      }
+      return match;
+    }
+  }
+  return false;
+}
+
+function isSidebarItem(item: NavSidebarItem | NavSubmenuItem): item is NavSidebarItem {
+  return Object.hasOwn(item, 'icon');
+}
diff --git a/static/app/views/issueList/utils.tsx b/static/app/views/issueList/utils.tsx
index 069731ba29932..3ce92f63b41c4 100644
--- a/static/app/views/issueList/utils.tsx
+++ b/static/app/views/issueList/utils.tsx
@@ -217,3 +217,33 @@ export const FOR_REVIEW_QUERIES: string[] = [Query.FOR_REVIEW];
 
 export const SAVED_SEARCHES_SIDEBAR_OPEN_LOCALSTORAGE_KEY =
   'issue-stream-saved-searches-sidebar-open';
+
+export enum IssueGroup {
+  ALL = 'all',
+  ERROR_OUTAGE = 'error_outage',
+  TREND = 'trend',
+  CRAFTSMANSHIP = 'craftsmanship',
+  SECURITY = 'security',
+}
+
+const IssueGroupFilter: Record<IssueGroup, string> = {
+  [IssueGroup.ALL]: '',
+  [IssueGroup.ERROR_OUTAGE]: 'issue.category:[error,cron,uptime]',
+  [IssueGroup.TREND]:
+    'issue.type:[profile_function_regression,performance_p95_endpoint_regression,performance_n_plus_one_db_queries]',
+  [IssueGroup.CRAFTSMANSHIP]:
+    'issue.category:replay issue.type:[performance_n_plus_one_db_queries,performance_n_plus_one_api_calls,performance_consecutive_db_queries,performance_render_blocking_asset_span,performance_uncompressed_assets,profile_file_io_main_thread,profile_image_decode_main_thread,profile_json_decode_main_thread,profile_regex_main_thread]',
+  [IssueGroup.SECURITY]: 'event.type:[nel,csp]',
+};
+
+function getIssueGroupFilter(group: IssueGroup): string {
+  if (!Object.hasOwn(IssueGroupFilter, group)) {
+    throw new Error(`Unknown issue group "${group}"`);
+  }
+  return IssueGroupFilter[group];
+}
+
+/** Generate a properly encoded `?query=` string for a given issue group */
+export function getSearchForIssueGroup(group: IssueGroup): string {
+  return `?${new URLSearchParams(`query=is:unresolved+${getIssueGroupFilter(group)}`)}`;
+}
diff --git a/static/app/views/organizationLayout/index.tsx b/static/app/views/organizationLayout/index.tsx
index 653c7dce706d0..cb51f9e1505ac 100644
--- a/static/app/views/organizationLayout/index.tsx
+++ b/static/app/views/organizationLayout/index.tsx
@@ -1,7 +1,11 @@
+import styled from '@emotion/styled';
+
 import Footer from 'sentry/components/footer';
 import HookOrDefault from 'sentry/components/hookOrDefault';
+import Nav from 'sentry/components/nav';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import Sidebar from 'sentry/components/sidebar';
+import type {Organization} from 'sentry/types/organization';
 import useRouteAnalyticsHookSetup from 'sentry/utils/routeAnalytics/useRouteAnalyticsHookSetup';
 import useDevToolbar from 'sentry/utils/useDevToolbar';
 import {useIsSentryEmployee} from 'sentry/utils/useIsSentryEmployee';
@@ -33,20 +37,60 @@ function OrganizationLayout({children}: Props) {
   // oganization is loaded before rendering children. Organization may not be
   // loaded yet when this first renders.
   const organization = useOrganization({allowNull: true});
+  const hasNavigationV2 = organization?.features.includes('navigation-sidebar-v2');
+  const App = hasNavigationV2 ? AppLayout : LegacyAppLayout;
 
   return (
     <SentryDocumentTitle noSuffix title={organization?.name ?? 'Sentry'}>
       <OrganizationContainer>
-        <div className="app">
-          {organization && <OrganizationHeader organization={organization} />}
-          {organization && <DevToolInit />}
-          <Sidebar />
-          <Body>{children}</Body>
-          <Footer />
-        </div>
+        <App organization={organization}>{children}</App>
       </OrganizationContainer>
     </SentryDocumentTitle>
   );
 }
 
+interface LayoutProps extends Props {
+  organization: Organization | null;
+}
+
+function AppLayout({children, organization}: LayoutProps) {
+  return (
+    <AppContainer className="app">
+      <Nav />
+      {/* The `#main` selector is used to make the app content `inert` when an overlay is active */}
+      <BodyContainer id="main">
+        {organization && <OrganizationHeader organization={organization} />}
+        {organization && <DevToolInit />}
+        <Body>{children}</Body>
+        <Footer />
+      </BodyContainer>
+    </AppContainer>
+  );
+}
+
+function LegacyAppLayout({children, organization}: LayoutProps) {
+  return (
+    <div className="app">
+      {organization && <OrganizationHeader organization={organization} />}
+      {organization && <DevToolInit />}
+      <Sidebar />
+      <Body>{children}</Body>
+      <Footer />
+    </div>
+  );
+}
+
+const AppContainer = styled('div')`
+  display: flex;
+  @media (min-width: ${p => p.theme.breakpoints.medium}) {
+    flex-direction: row;
+  }
+`;
+
+const BodyContainer = styled('div')`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+
 export default OrganizationLayout;
diff --git a/static/less/base.less b/static/less/base.less
index d96c1dd87365b..dae234bf567fc 100644
--- a/static/less/base.less
+++ b/static/less/base.less
@@ -17,6 +17,7 @@ html {
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   height: 100%;
+  scrollbar-gutter: stable;
 }
 
 body {