diff --git a/frontend/dashboard/components/Resources/Resources.tsx b/frontend/dashboard/components/Resources/Resources.tsx
index e74d6b57bca..fbc8f8fe173 100644
--- a/frontend/dashboard/components/Resources/Resources.tsx
+++ b/frontend/dashboard/components/Resources/Resources.tsx
@@ -64,9 +64,9 @@ const resources: Resource[] = [
     ),
   },
   {
-    label: 'dashboard.resource_slack_label',
-    description: 'dashboard.resource_slack_description',
-    url: 'https://altinn.slack.com',
+    label: 'dashboard.resource_contact_label',
+    description: 'dashboard.resource_contact_description',
+    url: 'https://altinn.studio/contact',
     icon: (
       <svg
         width='60'
@@ -174,7 +174,7 @@ const resources: Resource[] = [
   {
     label: 'dashboard.resource_status_label',
     description: 'dashboard.resource_status_description',
-    url: 'https://www.altinn.no/om-altinn/driftsmeldinger/',
+    url: 'https://status.digdir.no/',
     icon: (
       <svg
         width='60'
diff --git a/frontend/language/src/en.json b/frontend/language/src/en.json
index 99155229286..a65067eb030 100644
--- a/frontend/language/src/en.json
+++ b/frontend/language/src/en.json
@@ -102,6 +102,8 @@
   "dashboard.org_resources": "{{orgName}} resources",
   "dashboard.repository": "Repository",
   "dashboard.repository_in_list": "Repository for {{appName}}",
+  "dashboard.resource_contact_description": "In our Slack-chanel you can talk directly with the people working with Altinn Studio and other app developers.",
+  "dashboard.resource_contact_label": "Contact / Slack",
   "dashboard.resource_design_description": "Get access to Figma to prototype and user test your application before starting development. The prototype kit includes everything you need.",
   "dashboard.resource_design_label": "Design / usertest",
   "dashboard.resource_docs_description": "Documentation for Altinn Studio. Here you will find resources on how to develop your application.",
@@ -111,8 +113,6 @@
   "dashboard.resource_organisations_label": "All organisations",
   "dashboard.resource_roadmap_description": "Altinn is under continuous development. Find out whats being worked on and what we are planning for in the future.",
   "dashboard.resource_roadmap_label": "Roadmap",
-  "dashboard.resource_slack_description": "In our Slack-chanel you can talk directly with the people working with Altinn Studio and other app developers.",
-  "dashboard.resource_slack_label": "Contact / Slack",
   "dashboard.resource_status_description": "We keep you updated on new releases and service announcements that might be relevant for you when developing apps.",
   "dashboard.resource_status_label": "Service announcements",
   "dashboard.resource_table_header_createdby": "Created by",
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
index bc9ac83d8a8..9e88883f453 100644
--- a/frontend/language/src/nb.json
+++ b/frontend/language/src/nb.json
@@ -147,6 +147,8 @@
   "dashboard.org_apps": "{{orgName}}s apper",
   "dashboard.org_data_models": "{{orgName}}s datamodeller",
   "dashboard.org_resources": "{{orgName}}s ressurser",
+  "dashboard.resource_contact_description": "Se oversikt over hvordan du kommer i kontakt med oss i Altinn Studio.",
+  "dashboard.resource_contact_label": "Kontakt oss",
   "dashboard.resource_design_description": "Få tilgang til Figma for å prototype og brukerteste tjenesten din før du utvikler den. Med Prototype-pakken i Figma har du alt du trenger for å lage trådskisser.",
   "dashboard.resource_design_label": "Design/brukertest",
   "dashboard.resource_docs_description": "Dokumentasjonen til Altinn Studio. Her får du hjelp til å utvikle dine egne apper.",
@@ -156,8 +158,6 @@
   "dashboard.resource_organisations_label": "Alle organisasjoner",
   "dashboard.resource_roadmap_description": "Altinn utvikles hele tiden. Veikartet forteller mer om hva vi har gjort og hva vi planlegger å gjøre.",
   "dashboard.resource_roadmap_label": "Veikart",
-  "dashboard.resource_slack_description": "I vår Slack-kanal kan du snakke direkte med de som jobber med Altinn Studio og andre som utvikler apper.",
-  "dashboard.resource_slack_label": "Kontakt/Slack",
   "dashboard.resource_status_description": "Vi oppdaterer deg om nye utgaver av Studio og gir deg driftsmeldinger som kan ha betydning for deg når du utvikler tjenester.",
   "dashboard.resource_status_label": "Driftsmeldinger",
   "dashboard.resource_table_header_createdby": "Opprettet av",
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.module.css b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.module.css
new file mode 100644
index 00000000000..86263d1d238
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.module.css
@@ -0,0 +1,12 @@
+.menuContainer {
+  height: 100%;
+  background-color: var(--fds-semantic-surface-action-second-subtle);
+}
+
+.tabsContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fds-border_width-default);
+  background-color: var(--fds-semantic-border-action-second-subtle);
+  padding: var(--fds-border_width-default);
+}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.stories.tsx b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.stories.tsx
new file mode 100644
index 00000000000..db4b8209d60
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.stories.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import { BookIcon, VideoIcon, QuestionmarkDiamondIcon, ExternalLinkIcon } from '@studio/icons';
+import type { StudioContentMenuStoryExampleProps } from './StudioContentMenuStoryExample';
+import { StudioContentMenuStoryExample } from './StudioContentMenuStoryExample';
+
+type Story = StoryFn<StudioContentMenuStoryExampleProps<StudioMenuTabName>>;
+
+const meta: Meta<StudioContentMenuStoryExampleProps<StudioMenuTabName>> = {
+  title: 'Components/StudioContentMenu',
+  component: StudioContentMenuStoryExample,
+  argTypes: {
+    buttonTabs: {
+      control: 'object',
+      description: 'Array of button menu tabs with icons, names, and ids.',
+      table: {
+        type: { summary: 'StudioContentMenuButtonTabProps<TabId>[]' },
+      },
+    },
+    linkTabs: {
+      control: 'object',
+      description:
+        'Array of link menu tabs with icons, names, and ids. Provide an optional link-element to return `props` in renderTab.',
+      table: {
+        type: { summary: 'StudioContentMenuLinkTabProps<TabId>[]' },
+      },
+    },
+    selectedTabId: {
+      table: { disable: true },
+    },
+    onChangeTab: {
+      table: { disable: true },
+    },
+  },
+};
+
+export default meta;
+
+type StudioMenuTabName = 'booksTab' | 'videosTab' | 'tabWithVeryLongTabName' | 'tabAsLink';
+
+export const Preview: Story = (args: StudioContentMenuStoryExampleProps<StudioMenuTabName>) => (
+  <StudioContentMenuStoryExample {...args} />
+);
+
+Preview.args = {
+  buttonTabs: [
+    {
+      tabId: 'booksTab',
+      tabName: 'Bøker',
+      icon: <BookIcon />,
+    },
+    {
+      tabId: 'videosTab',
+      tabName: 'Filmer',
+      icon: <VideoIcon />,
+    },
+    {
+      tabId: 'tabWithVeryLongTabName',
+      tabName: 'LoremIpsumLoremIpsumLoremIpsum',
+      icon: <QuestionmarkDiamondIcon />,
+    },
+  ],
+  linkTabs: [
+    {
+      tabId: 'tabAsLink',
+      tabName: 'Gå til Designsystemet',
+      icon: <ExternalLinkIcon />,
+      renderTab: (props) => <a href={'https://next.storybook.designsystemet.no'} {...props} />,
+    },
+  ],
+  onChangeTab: () => {},
+};
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.test.tsx b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.test.tsx
new file mode 100644
index 00000000000..5133feddaf4
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.test.tsx
@@ -0,0 +1,206 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { StudioContentMenu, type StudioContentMenuLinkTabProps } from './';
+import type { StudioContentMenuButtonTabProps } from './StudioContentMenuButtonTab';
+
+type StudioMenuTabName = 'tab1' | 'tab2' | 'tab3';
+
+const onChangeTabMock = jest.fn();
+
+const tab1Name = 'My tab';
+const tab1Id: StudioMenuTabName = 'tab1';
+const tab1: StudioContentMenuButtonTabProps<StudioMenuTabName> = {
+  tabName: tab1Name,
+  tabId: tab1Id,
+  icon: <svg />,
+};
+const tab2Name = 'My second tab';
+const tab2Id: StudioMenuTabName = 'tab2';
+const tab2: StudioContentMenuButtonTabProps<StudioMenuTabName> = {
+  tabName: tab2Name,
+  tabId: tab2Id,
+  icon: <svg />,
+};
+
+describe('StudioContentMenu', () => {
+  afterEach(jest.clearAllMocks);
+
+  it('renders first tab as selected if selectedTab is not provided', () => {
+    renderStudioContentMenu({
+      buttonTabs: [tab1, tab2],
+    });
+    const firstTab = screen.getByRole('tab', { name: tab1Name });
+    expect(firstTab).toHaveClass('selected');
+  });
+
+  it('renders a not selected tab without selected style', () => {
+    renderStudioContentMenu({
+      buttonTabs: [tab1, tab2],
+    });
+    const notSelectedTab = screen.getByRole('tab', { name: tab2Name });
+    expect(notSelectedTab).not.toHaveClass('selected');
+  });
+
+  it('renders a selected tab with tabIndex 0', () => {
+    renderStudioContentMenu({
+      buttonTabs: [tab1],
+    });
+    const menuTab = screen.getByRole('tab', { name: tab1Name });
+    expect(menuTab).toHaveAttribute('tabIndex', '0');
+  });
+
+  it('renders a not selected tab with tabIndex -1', () => {
+    renderStudioContentMenu({
+      buttonTabs: [tab1, tab2],
+    });
+    const notSelectedTab = screen.getByRole('tab', { name: tab2Name });
+    expect(notSelectedTab).toHaveAttribute('tabIndex', '-1');
+  });
+
+  it('renders an empty contentMenu when there is no provided tabs', () => {
+    renderStudioContentMenu({ buttonTabs: [] });
+    const emptyMenu = screen.getByRole('tablist');
+    expect(emptyMenu).toBeInTheDocument();
+  });
+
+  it('renders the title and icon of a given menu tab', () => {
+    const iconTitle = 'My icon';
+    renderStudioContentMenu({
+      buttonTabs: [
+        {
+          ...tab1,
+          icon: <svg data-testid={iconTitle}></svg>,
+        },
+      ],
+    });
+    const menuTab = screen.getByRole('tab', { name: tab1Name });
+    const menuTabTitle = screen.getByTitle(tab1Name);
+    const menuIcon = screen.getByTestId(iconTitle);
+    expect(menuTab).toBeInTheDocument();
+    expect(menuTabTitle).toBeInTheDocument();
+    expect(menuIcon).toBeInTheDocument();
+  });
+
+  it('renders a linkTab as a link element', () => {
+    const link = 'url-link';
+    renderStudioContentMenu({
+      linkTabs: [
+        {
+          ...tab1,
+          renderTab: (props) => <a href={link} {...props} />,
+        },
+      ],
+    });
+    const linkTab = screen.getByRole('tab', { name: tab1Name });
+    expect(linkTab).toBeInTheDocument();
+    expect(linkTab).toHaveAttribute('href', link);
+  });
+
+  it('allows changing focus to next tab using keyboard', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      buttonTabs: [tab1, tab2],
+    });
+    const tab1Element = screen.getByRole('tab', { name: tab1Name });
+    await user.click(tab1Element);
+    const tab2Element = screen.getByRole('tab', { name: tab2Name });
+    expect(tab2Element).not.toHaveFocus();
+    await user.keyboard('{ArrowDown}');
+    expect(tab2Element).toHaveFocus();
+  });
+
+  it('keeps focus on current tab if pressing keyDown when focus is on last tab in menu', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      buttonTabs: [tab1, tab2],
+    });
+    const tab2Element = screen.getByRole('tab', { name: tab2Name });
+    await user.click(tab2Element);
+    expect(tab2Element).toHaveFocus();
+    await user.keyboard('{ArrowDown}');
+    expect(tab2Element).toHaveFocus();
+  });
+
+  it('allows changing focus to previous tab using keyboard', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      buttonTabs: [tab1, tab2],
+    });
+    const tab2Element = screen.getByRole('tab', { name: tab2Name });
+    await user.click(tab2Element);
+    const tab1Element = screen.getByRole('tab', { name: tab1Name });
+    expect(tab1Element).not.toHaveFocus();
+    await user.keyboard('{ArrowUp}');
+    expect(tab1Element).toHaveFocus();
+  });
+
+  it('keeps focus on current tab if pressing keyUp when focus is on first tab in menu', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      buttonTabs: [tab1, tab2],
+    });
+    const tab1Element = screen.getByRole('tab', { name: tab1Name });
+    await user.click(tab1Element);
+    expect(tab1Element).toHaveFocus();
+    await user.keyboard('{ArrowUp}');
+    expect(tab1Element).toHaveFocus();
+  });
+
+  it('calls onChangeTab when clicking enter on a tab with focus', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      buttonTabs: [tab1, tab2],
+    });
+    const tab1Element = screen.getByRole('tab', { name: tab1Name });
+    await user.click(tab1Element);
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{Enter}');
+    expect(onChangeTabMock).toHaveBeenCalledTimes(2);
+    expect(onChangeTabMock).toHaveBeenNthCalledWith(1, tab1Id);
+    expect(onChangeTabMock).toHaveBeenNthCalledWith(2, tab2Id);
+  });
+
+  it('calls onChangeTab when clicking on a menu tab', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      buttonTabs: [tab1],
+    });
+    const menuTab = screen.getByRole('tab', { name: tab1Name });
+    await user.click(menuTab);
+    expect(onChangeTabMock).toHaveBeenCalledTimes(1);
+    expect(onChangeTabMock).toHaveBeenCalledWith(tab1Id);
+  });
+});
+
+type RenderStudioContentMenuProps<TabId extends string> = {
+  buttonTabs: StudioContentMenuButtonTabProps<TabId>[];
+  linkTabs: StudioContentMenuLinkTabProps<TabId>[];
+};
+
+const renderStudioContentMenu = ({
+  buttonTabs = [],
+  linkTabs = [],
+}: Partial<RenderStudioContentMenuProps<StudioMenuTabName>> = {}) => {
+  render(
+    <StudioContentMenu selectedTabId={undefined} onChangeTab={onChangeTabMock}>
+      {buttonTabs.map((buttonTab) => (
+        <StudioContentMenu.ButtonTab
+          key={buttonTab.tabId}
+          icon={buttonTab.icon}
+          tabId={buttonTab.tabId}
+          tabName={buttonTab.tabName}
+        />
+      ))}
+      {linkTabs.map((linkTab) => (
+        <StudioContentMenu.LinkTab
+          key={linkTab.tabId}
+          icon={linkTab.icon}
+          tabId={linkTab.tabId}
+          tabName={linkTab.tabName}
+          renderTab={linkTab.renderTab}
+        />
+      ))}
+    </StudioContentMenu>,
+  );
+};
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.tsx b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.tsx
new file mode 100644
index 00000000000..deb4ceef71d
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.tsx
@@ -0,0 +1,48 @@
+import React, { Children, forwardRef, useState } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import classes from './StudioContentMenu.module.css';
+import { StudioContentMenuContextProvider } from './context/StudioContentMenuContext';
+
+export type StudioContentMenuProps<TabId extends string> = {
+  children: ReactNode;
+  selectedTabId: TabId;
+  onChangeTab: (tabId: TabId) => void;
+};
+
+function StudioContentMenuForwarded<TabId extends string>(
+  { children, selectedTabId, onChangeTab }: StudioContentMenuProps<TabId>,
+  ref: React.Ref<HTMLDivElement>,
+): ReactElement {
+  const firstTabId = getFirstTabId(children);
+  const [selectedTab, setSelectedTab] = useState<TabId>(selectedTabId ?? firstTabId);
+
+  const handleChangeTab = (tabId: TabId) => {
+    onChangeTab(tabId);
+    setSelectedTab(tabId);
+  };
+
+  const isTabSelected = (tabId: TabId) => selectedTab === tabId;
+
+  return (
+    <div ref={ref} className={classes.menuContainer}>
+      <div ref={ref} className={classes.tabsContainer} role='tablist'>
+        <StudioContentMenuContextProvider
+          isTabSelected={isTabSelected}
+          onChangeTab={handleChangeTab}
+        >
+          {children}
+        </StudioContentMenuContextProvider>
+      </div>
+    </div>
+  );
+}
+
+export const StudioContentMenu = forwardRef<HTMLDivElement, StudioContentMenuProps<string>>(
+  StudioContentMenuForwarded,
+);
+
+const getFirstTabId = (children: ReactNode) => {
+  return Children.toArray(children).filter((child): child is ReactElement =>
+    React.isValidElement(child),
+  )[0]?.props.tabId;
+};
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuButtonTab/StudioContentMenuButtonTab.tsx b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuButtonTab/StudioContentMenuButtonTab.tsx
new file mode 100644
index 00000000000..b08f457d793
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuButtonTab/StudioContentMenuButtonTab.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { useTabProps } from '../hooks/useTabProps';
+import { StudioButton } from '@studio/components';
+
+export type StudioContentMenuButtonTabProps<TabId extends string> = {
+  icon: ReactNode;
+  tabName: string;
+  tabId: TabId;
+};
+
+export function StudioContentMenuButtonTab<TabId extends string>({
+  icon,
+  tabName,
+  tabId,
+}: StudioContentMenuButtonTabProps<TabId>): React.ReactElement {
+  const props = useTabProps(icon, tabName, tabId);
+
+  return <StudioButton {...props} color='first' />;
+}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuButtonTab/index.ts b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuButtonTab/index.ts
new file mode 100644
index 00000000000..4487fc8824d
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuButtonTab/index.ts
@@ -0,0 +1,2 @@
+export { StudioContentMenuButtonTab } from './StudioContentMenuButtonTab';
+export type { StudioContentMenuButtonTabProps } from './StudioContentMenuButtonTab';
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuLinkTab/StudioContentMenuLinkTab.tsx b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuLinkTab/StudioContentMenuLinkTab.tsx
new file mode 100644
index 00000000000..7d4d2df1190
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuLinkTab/StudioContentMenuLinkTab.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { useTabProps } from '../hooks/useTabProps';
+import { StudioButton } from '@studio/components';
+
+export type StudioContentMenuLinkTabProps<TabId extends string> = {
+  icon: ReactNode;
+  tabName: string;
+  tabId: TabId;
+  renderTab: (props: React.HTMLAttributes<HTMLAnchorElement>) => React.ReactElement;
+};
+
+export function StudioContentMenuLinkTab<TabId extends string>({
+  icon,
+  tabName,
+  tabId,
+  renderTab,
+}: StudioContentMenuLinkTabProps<TabId>): React.ReactElement {
+  const props = useTabProps(icon, tabName, tabId);
+
+  return <StudioButton asChild>{renderTab(props)}</StudioButton>;
+}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuLinkTab/index.ts b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuLinkTab/index.ts
new file mode 100644
index 00000000000..49029d77d44
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuLinkTab/index.ts
@@ -0,0 +1,2 @@
+export { StudioContentMenuLinkTab } from './StudioContentMenuLinkTab';
+export type { StudioContentMenuLinkTabProps } from './StudioContentMenuLinkTab';
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuStoryExample.module.css b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuStoryExample.module.css
new file mode 100644
index 00000000000..ef296e30ece
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuStoryExample.module.css
@@ -0,0 +1,4 @@
+.contentMenuWrapper {
+  height: 300px;
+  width: 20vw;
+}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuStoryExample.tsx b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuStoryExample.tsx
new file mode 100644
index 00000000000..9be82a755ed
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenuStoryExample.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { StudioContentMenu } from './';
+import classes from './StudioContentMenuStoryExample.module.css';
+import type { StudioContentMenuButtonTabProps } from './StudioContentMenuButtonTab';
+import type { StudioContentMenuLinkTabProps } from './StudioContentMenuLinkTab';
+
+export type StudioContentMenuStoryExampleProps<TabId extends string> = {
+  buttonTabs: StudioContentMenuButtonTabProps<TabId>[];
+  linkTabs: StudioContentMenuLinkTabProps<TabId>[];
+  selectedTabId: TabId;
+  onChangeTab: (tabId: TabId) => void;
+};
+
+export function StudioContentMenuStoryExample<TabId extends string>({
+  selectedTabId,
+  onChangeTab,
+  buttonTabs,
+  linkTabs,
+}: StudioContentMenuStoryExampleProps<TabId>) {
+  return (
+    <div className={classes.contentMenuWrapper}>
+      <StudioContentMenu selectedTabId={selectedTabId} onChangeTab={onChangeTab}>
+        <StudioContentMenu.ButtonTab
+          icon={buttonTabs[0].icon}
+          tabId={buttonTabs[0].tabId}
+          tabName={buttonTabs[0].tabName}
+        />
+        <StudioContentMenu.ButtonTab
+          icon={buttonTabs[1].icon}
+          tabId={buttonTabs[1].tabId}
+          tabName={buttonTabs[1].tabName}
+        />
+        <StudioContentMenu.ButtonTab
+          icon={buttonTabs[2].icon}
+          tabId={buttonTabs[2].tabId}
+          tabName={buttonTabs[2].tabName}
+        />
+        <StudioContentMenu.LinkTab
+          icon={linkTabs[0].icon}
+          tabId={linkTabs[0].tabId}
+          tabName={linkTabs[0].tabName}
+          renderTab={linkTabs[0].renderTab}
+        />
+      </StudioContentMenu>
+    </div>
+  );
+}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTab/StudioMenuTab.module.css b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTab/StudioMenuTab.module.css
new file mode 100644
index 00000000000..f48508dd446
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTab/StudioMenuTab.module.css
@@ -0,0 +1,12 @@
+.tabIcon {
+  display: flex;
+  align-items: center;
+  font-size: var(--fds-spacing-8);
+  color: var(--fds-semantic-text-neutral-default);
+}
+
+.tabTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTab/StudioMenuTab.tsx b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTab/StudioMenuTab.tsx
new file mode 100644
index 00000000000..842952acba5
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTab/StudioMenuTab.tsx
@@ -0,0 +1,20 @@
+import classes from './StudioMenuTab.module.css';
+import { StudioParagraph } from '@studio/components';
+import type { ReactNode } from 'react';
+import React from 'react';
+
+type StudioMenuTabProps = {
+  icon: ReactNode;
+  tabName: string;
+};
+
+export function StudioMenuTab({ icon, tabName }: StudioMenuTabProps) {
+  return (
+    <>
+      <div className={classes.tabIcon}>{icon}</div>
+      <StudioParagraph size='small' variant='short' className={classes.tabTitle}>
+        {tabName}
+      </StudioParagraph>
+    </>
+  );
+}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTab/index.ts b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTab/index.ts
new file mode 100644
index 00000000000..b78f5ac6cea
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/StudioMenuTab/index.ts
@@ -0,0 +1 @@
+export { StudioMenuTab } from './StudioMenuTab';
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/context/StudioContentMenuContext.test.tsx b/frontend/libs/studio-components/src/components/StudioContentMenu/context/StudioContentMenuContext.test.tsx
new file mode 100644
index 00000000000..a10d9ee81e7
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/context/StudioContentMenuContext.test.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import {
+  StudioContentMenuContextProvider,
+  useStudioContentMenuContext,
+} from './StudioContentMenuContext';
+
+describe('StudioContentMenuContext', () => {
+  it('should render children', () => {
+    render(
+      <StudioContentMenuContextProvider>
+        <button>My button</button>
+      </StudioContentMenuContextProvider>,
+    );
+
+    expect(screen.getByRole('button', { name: 'My button' })).toBeInTheDocument();
+  });
+
+  it('should provide a useStudioContentMenuContext hook', () => {
+    const TestComponent = () => {
+      const {} = useStudioContentMenuContext();
+      return <div data-testid='context'></div>;
+    };
+
+    render(
+      <StudioContentMenuContextProvider>
+        <TestComponent />
+      </StudioContentMenuContextProvider>,
+    );
+
+    expect(screen.getByTestId('context')).toHaveTextContent('');
+  });
+
+  it('should throw an error when useStudioContentMenuContext is used outside of a StudioContentMenuContextProvider', () => {
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const TestComponent = () => {
+      useStudioContentMenuContext();
+      return <div data-testid='context'>Test</div>;
+    };
+
+    expect(() => render(<TestComponent />)).toThrow(
+      'useStudioContentMenuContext must be used within a StudioContentMenuContextProvider',
+    );
+    expect(consoleError).toHaveBeenCalled();
+  });
+});
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/context/StudioContentMenuContext.tsx b/frontend/libs/studio-components/src/components/StudioContentMenu/context/StudioContentMenuContext.tsx
new file mode 100644
index 00000000000..450a52bd27a
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/context/StudioContentMenuContext.tsx
@@ -0,0 +1,39 @@
+import React, { type ReactNode, createContext, useContext } from 'react';
+
+export type StudioContentMenuContextProps<TabId extends string> = {
+  isTabSelected: (tabId: TabId) => boolean;
+  onChangeTab: (tabId: TabId) => void;
+};
+
+const StudioContentMenuContext =
+  createContext<Partial<StudioContentMenuContextProps<string>>>(undefined);
+
+export type StudioContentMenuContextProviderProps<TabId extends string> = {
+  children: ReactNode;
+} & StudioContentMenuContextProps<TabId>;
+
+export function StudioContentMenuContextProvider<TabId extends string>({
+  children,
+  isTabSelected,
+  onChangeTab,
+}: Partial<StudioContentMenuContextProviderProps<TabId>>) {
+  return (
+    <StudioContentMenuContext.Provider value={{ isTabSelected, onChangeTab }}>
+      {children}
+    </StudioContentMenuContext.Provider>
+  );
+}
+
+export const useStudioContentMenuContext = <TabId extends string>(): Partial<
+  StudioContentMenuContextProps<TabId>
+> => {
+  const context = useContext(StudioContentMenuContext) as Partial<
+    StudioContentMenuContextProps<TabId>
+  >;
+  if (context === undefined) {
+    throw new Error(
+      'useStudioContentMenuContext must be used within a StudioContentMenuContextProvider',
+    );
+  }
+  return context;
+};
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/hooks/useTabProps.module.css b/frontend/libs/studio-components/src/components/StudioContentMenu/hooks/useTabProps.module.css
new file mode 100644
index 00000000000..316350e2078
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/hooks/useTabProps.module.css
@@ -0,0 +1,28 @@
+.tab {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  gap: var(--fds-spacing-2);
+  padding: var(--fds-spacing-3);
+  width: 100%;
+  background-color: var(--fds-semantic-surface-action-second-subtle);
+  cursor: pointer;
+  border-left: var(--fds-sizing-1) solid transparent;
+  border-width: 0 0 0 var(--fds-sizing-1);
+  border-radius: 0;
+}
+
+.tab.selected {
+  border-left: var(--fds-sizing-1) solid var(--semantic-surface-action-default);
+  background-color: white;
+}
+
+.tab:hover,
+.selectedTab:hover {
+  background-color: var(--fds-semantic-surface-action-no_fill-hover);
+}
+
+.tab:focus {
+  z-index: 1;
+}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/hooks/useTabProps.tsx b/frontend/libs/studio-components/src/components/StudioContentMenu/hooks/useTabProps.tsx
new file mode 100644
index 00000000000..d1c6b6df440
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/hooks/useTabProps.tsx
@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import { useStudioContentMenuContext } from '../context/StudioContentMenuContext';
+import type { HTMLTabElement } from '../utils/dom-utils';
+import { moveFocus } from '../utils/dom-utils';
+import classes from './useTabProps.module.css';
+import { StudioMenuTab } from '../StudioMenuTab';
+import cn from 'classnames';
+
+export function useTabProps<TabId extends string>(icon: ReactNode, tabName: string, tabId: TabId) {
+  const { isTabSelected, onChangeTab } = useStudioContentMenuContext();
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTabElement>) => {
+    moveFocus(event);
+  };
+
+  const props: React.HTMLAttributes<HTMLTabElement> = {
+    className: cn(classes.tab, isTabSelected(tabId) ? classes.selected : null),
+    role: 'tab',
+    tabIndex: isTabSelected(tabId) ? 0 : -1,
+    onClick: () => onChangeTab(tabId),
+    onKeyDown: handleKeyDown,
+    children: <StudioMenuTab icon={icon} tabName={tabName} />,
+    title: tabName,
+  };
+
+  return props;
+}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/index.ts b/frontend/libs/studio-components/src/components/StudioContentMenu/index.ts
new file mode 100644
index 00000000000..de949b46705
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/index.ts
@@ -0,0 +1,15 @@
+export type { StudioContentMenuButtonTabProps } from './StudioContentMenuButtonTab';
+export type { StudioContentMenuLinkTabProps } from './StudioContentMenuLinkTab';
+import { StudioContentMenu as StudioContentMenuRoot } from './StudioContentMenu';
+import { StudioContentMenuButtonTab } from './StudioContentMenuButtonTab';
+import { StudioContentMenuLinkTab } from './StudioContentMenuLinkTab';
+
+type StudioContentMenuComponent = typeof StudioContentMenuRoot & {
+  ButtonTab: typeof StudioContentMenuButtonTab;
+  LinkTab: typeof StudioContentMenuLinkTab;
+};
+
+export const StudioContentMenu = StudioContentMenuRoot as StudioContentMenuComponent;
+
+StudioContentMenu.ButtonTab = StudioContentMenuButtonTab;
+StudioContentMenu.LinkTab = StudioContentMenuLinkTab;
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/utils/dom-utils.test.tsx b/frontend/libs/studio-components/src/components/StudioContentMenu/utils/dom-utils.test.tsx
new file mode 100644
index 00000000000..d2eedddce3e
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/utils/dom-utils.test.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import type { HTMLTabElement } from './dom-utils';
+import { moveFocus } from './dom-utils';
+
+describe('moveFocus', () => {
+  it('moves focus to the next tab when ArrowDown is pressed', () => {
+    renderTabList();
+    simulateFocusMove('ArrowDown', 'tab-1', 'tab-2');
+    simulateFocusMove('ArrowDown', 'tab-2', 'tab-3');
+  });
+
+  it('moves focus to the previous tab when ArrowUp is pressed', () => {
+    renderTabList();
+    simulateFocusMove('ArrowUp', 'tab-3', 'tab-2');
+    simulateFocusMove('ArrowUp', 'tab-2', 'tab-1');
+  });
+});
+
+const renderTabList = () => {
+  render(
+    <div role='tablist'>
+      <button role='tab' data-testid='tab-1'>
+        Tab 1
+      </button>
+      <button role='tab' data-testid='tab-2'>
+        Tab 2
+      </button>
+      <button role='tab' data-testid='tab-3'>
+        Tab 3
+      </button>
+    </div>,
+  );
+};
+
+function simulateFocusMove(key: string, initialTabId: string, expectedFocusedTabId: string) {
+  const initialTab = screen.getByTestId(initialTabId);
+  initialTab.focus();
+  const event = {
+    key,
+    currentTarget: initialTab,
+    preventDefault: jest.fn(),
+  } as unknown as React.KeyboardEvent<HTMLTabElement>;
+  moveFocus(event);
+  expect(screen.getByTestId(expectedFocusedTabId)).toHaveFocus();
+}
diff --git a/frontend/libs/studio-components/src/components/StudioContentMenu/utils/dom-utils.ts b/frontend/libs/studio-components/src/components/StudioContentMenu/utils/dom-utils.ts
new file mode 100644
index 00000000000..133f833a0ee
--- /dev/null
+++ b/frontend/libs/studio-components/src/components/StudioContentMenu/utils/dom-utils.ts
@@ -0,0 +1,50 @@
+import type React from 'react';
+
+export type HTMLTabElement = HTMLAnchorElement | HTMLButtonElement;
+
+export function moveFocus(event: React.KeyboardEvent<HTMLTabElement>) {
+  const nextTab = getNextTab(event);
+  if (nextTab) {
+    event.preventDefault();
+    nextTab.tabIndex = 0;
+    nextTab.focus();
+    event.currentTarget.tabIndex = -1;
+  }
+}
+
+function getNextTab({ key, currentTarget }: React.KeyboardEvent<HTMLTabElement>) {
+  const tablist = getParentTablist(currentTarget);
+  const tabs = getTabs(tablist);
+  switch (key) {
+    case 'ArrowUp':
+      return getTabElementAbove(tabs, currentTarget);
+    case 'ArrowDown':
+      return getTabElementBelow(tabs, currentTarget);
+    default:
+      return null;
+  }
+}
+
+function getTabElementAbove(tabs: HTMLTabElement[], currentTab: HTMLTabElement) {
+  const currentIndex = tabs.indexOf(currentTab);
+  if (currentIndex > 0) {
+    return tabs[currentIndex - 1];
+  }
+  return null;
+}
+
+function getTabElementBelow(tabs: HTMLTabElement[], currentTab: HTMLTabElement) {
+  const currentIndex = tabs.indexOf(currentTab);
+  if (currentIndex < tabs.length - 1) {
+    return tabs[currentIndex + 1] as HTMLTabElement;
+  }
+  return null;
+}
+
+function getTabs(tablist: HTMLDivElement): HTMLTabElement[] {
+  return Array.from(tablist.querySelectorAll('[role="tab"]')) as HTMLTabElement[];
+}
+
+function getParentTablist(element: HTMLTabElement): HTMLDivElement | null {
+  return element.closest('[role="tablist"]');
+}
diff --git a/frontend/libs/studio-components/src/components/index.ts b/frontend/libs/studio-components/src/components/index.ts
index ecb388eda43..033e84e0424 100644
--- a/frontend/libs/studio-components/src/components/index.ts
+++ b/frontend/libs/studio-components/src/components/index.ts
@@ -12,6 +12,7 @@ export * from './StudioCheckbox';
 export * from './StudioCodeFragment';
 export * from './StudioCodelistEditor';
 export * from './StudioCombobox';
+export * from './StudioContentMenu';
 export * from './StudioDecimalInput';
 export * from './StudioDeleteButton';
 export * from './StudioDisplayTile';