@redocly/theme 0.70.0-next.3 → 0.70.0-next.4

package/src/components/NavigationTabs/NavigationTabs.tsx

@@ -0,0 +1,83 @@
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { NavigationTabsConfig } from '@redocly/theme/core/types';
+
+import { breakpoints } from '@redocly/theme/core/utils';
+import { useScrollItemIntoView, useThemeHooks } from '@redocly/theme/core/hooks';
+import { NavigationTab } from '@redocly/theme/components/NavigationTabs/NavigationTab';
+
+export type NavigationTabsProps = {
+  config?: NavigationTabsConfig;
+  className?: string;
+};
+
+export function NavigationTabs({ config, className }: NavigationTabsProps): JSX.Element | null {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const listRef = useRef<HTMLUListElement | null>(null);
+
+  const tabs = config?.items ?? [];
+  const activeIndex = tabs.findIndex((tab) => tab.active);
+
+  useScrollItemIntoView(listRef, activeIndex);
+
+  if (!tabs.length) {
+    return null;
+  }
+
+  return (
+    <NavigationTabsWrapper
+      data-component-name="NavigationTabs/NavigationTabs"
+      className={className}
+      aria-label={translate('navigationTabs.label', 'Navigation tabs')}
+    >
+      <NavigationTabsList ref={listRef}>
+        {tabs.map((tab, index) => (
+          <NavigationTab key={`${tab.label}_${index}`} tab={tab} />
+        ))}
+      </NavigationTabsList>
+    </NavigationTabsWrapper>
+  );
+}
+
+const NavigationTabsWrapper = styled.nav`
+  display: none;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--navigation-tabs-height);
+  max-width: var(--navbar-container-max-width);
+  padding: var(--navigation-tabs-padding);
+  background: var(--navigation-tabs-bg-color);
+  border-bottom: var(--navigation-tabs-bottom-border);
+  flex-shrink: 0;
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: flex;
+  }
+
+  @media screen and (min-width: ${breakpoints.max}) {
+    max-width: var(--container-max-width);
+    margin-left: auto;
+    margin-right: auto;
+  }
+`;
+
+const NavigationTabsList = styled.ul`
+  list-style: none;
+  margin: 0 0 calc(-1 * var(--navigation-tabs-border-width));
+  padding: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: var(--navigation-tabs-gap);
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;

package/src/components/NavigationTabs/variables.ts

@@ -0,0 +1,34 @@
+import { css } from 'styled-components';
+
+export const navigationTabs = css`
+  --navigation-tabs-height: 48px; // @presenter Spacing
+  --navigation-tabs-bg-color: transparent; // @presenter Color
+  --navigation-tabs-border-color: var(--border-color-secondary);
+  --navigation-tabs-border-width: 1px;
+  --navigation-tabs-bottom-border: var(--navigation-tabs-border-width) solid var(--navigation-tabs-border-color);
+  --navigation-tabs-padding-vertical: 0;
+  --navigation-tabs-padding-horizontal: var(--spacing-xl);
+  --navigation-tabs-padding: var(--navigation-tabs-padding-vertical) var(--navigation-tabs-padding-horizontal); // @presenter Spacing
+  --navigation-tabs-gap: var(--spacing-base); // @presenter Spacing
+
+  --navigation-tabs-item-padding-vertical: var(--spacing-xxs);
+  --navigation-tabs-item-padding-horizontal: 0;
+  --navigation-tabs-item-padding: var(--navigation-tabs-item-padding-vertical) var(--navigation-tabs-item-padding-horizontal);
+  --navigation-tabs-item-content-gap: var(--spacing-xs);
+  --navigation-tabs-item-font-size: var(--font-size-base);
+  --navigation-tabs-item-line-height: var(--line-height-base);
+  --navigation-tabs-item-font-weight: var(--font-weight-regular);
+  --navigation-tabs-item-font-weight-active: var(--font-weight-medium);
+  --navigation-tabs-item-text-color: var(--navbar-text-color); // @presenter Color
+  --navigation-tabs-item-text-color-hover: var(--text-color-primary); // @presenter Color
+  --navigation-tabs-item-text-color-active: var(--text-color-primary); // @presenter Color
+  --navigation-tabs-item-bottom-border: var(--navigation-tabs-border-width) solid transparent;
+  --navigation-tabs-item-bottom-border-hover: var(--navigation-tabs-border-width) solid var(--border-color-primary);
+  --navigation-tabs-item-bottom-border-active: var(--navigation-tabs-border-width) solid var(--border-color-inverse);
+  --navigation-tabs-item-border-color-focused: var(--button-border-color-focused);
+  --navigation-tabs-item-border-radius: var(--navbar-item-border-radius);
+  --navigation-tabs-item-icon-size: 1.25em; // @presenter Spacing
+  --navigation-tabs-item-external-icon-margin-left: 0;
+  --navigation-tabs-item-label-font-weight-active: var(--navigation-tabs-item-font-weight-active);
+  --navigation-tabs-item-transition: 150ms ease-in-out;
+`;

package/src/components/Search/SearchTrigger.tsx

@@ -31,7 +31,10 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
   }
 
   mainShortcutKey = mainShortcutKey?.toUpperCase();
-  const isMac = getUserAgent().includes('Mac');
+  // A page can be cached and served to every platform, so the server renders a hidden
+  // placeholder and the browser picks the label after hydration.
+  const [isMac, setIsMac] = React.useState<boolean | undefined>(undefined);
+  React.useEffect(() => setIsMac(getUserAgent().includes('Mac')), []);
 
   return (
     <SearchTriggerWrapper
@@ -53,7 +56,9 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
         <SearchIcon />
         {translate('search.navbar.label', 'Search')}
         {mainShortcutKey === DEFAULT_KEYBOARD_SHORTCUTS ? (
-          <span>{isMac ? '⌘K' : 'Ctrl+K'}</span>
+          <SearchTriggerShortcut $isPending={isMac === undefined}>
+            {isMac ? '⌘K' : 'Ctrl+K'}
+          </SearchTriggerShortcut>
         ) : (
           <span>{mainShortcutKey}</span>
         )}
@@ -80,6 +85,10 @@ const SearchTriggerButton = styled(Button)`
   }
 `;
 
+const SearchTriggerShortcut = styled.span<{ $isPending: boolean }>`
+  visibility: ${({ $isPending }) => ($isPending ? 'hidden' : 'visible')};
+`;
+
 const SearchTriggerInput = styled.div`
   display: none;
   align-items: center;

package/src/components/Sidebar/Sidebar.tsx

@@ -84,8 +84,8 @@ const SidebarContent = styled.aside<{ $opened: boolean; $collapsed?: boolean }>`
   flex-direction: column;
   width: 100%;
   -webkit-font-smoothing: antialiased;
-  top: calc(var(--navbar-height) + var(--banner-height));
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  top: var(--navbar-offset);
+  height: calc(100vh - var(--navbar-offset));
   overflow-x: hidden;
   ${({ $opened }) => `
     display: ${$opened ? 'flex' : 'none'}

package/src/components/TableOfContent/TableOfContent.tsx

@@ -101,8 +101,8 @@ const TableOfContentHeader = styled.div`
 
 const TableOfContentItems = styled.div`
   position: sticky;
-  top: calc(var(--navbar-height) + var(--toc-offset-top));
-  max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
+  top: calc(var(--navbar-stack-height) + var(--toc-offset-top));
+  max-height: calc(100vh - var(--navbar-stack-height) - var(--toc-offset-top));
   overflow-y: auto;
   width: var(--toc-width);
   border-left: solid 1px var(--toc-border-color);

package/src/core/constants/common.ts

@@ -18,6 +18,7 @@ export enum FEEDBACK_TYPES {
 export const DEFAULT_FEEDBACK_TYPE = FEEDBACK_TYPES.SENTIMENT;
 
 export enum MenuItemType {
+  Select = 'select',
   Separator = 'separator',
   DrillDown = 'drilldown',
   Group = 'group',

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -70,6 +70,7 @@ export const useThemeHooks = vi.fn(() => ({
     items: [],
     isLoading: false,
   })),
+  useSearchFeatures: vi.fn(() => ({ askAi: false })),
   useAiSearch: vi.fn(() => ({
     askQuestion: vi.fn(),
     isGeneratingResponse: false,
@@ -117,6 +118,7 @@ export const useThemeHooks = vi.fn(() => ({
     pushDrilldownState: vi.fn(),
   }),
   useSidebarSiblingsData: vi.fn(),
+  useNavigationTabs: vi.fn(),
   useSubmitFeedback: vi.fn(() => ({
     submitFeedback: vi.fn(),
   })),

package/src/core/hooks/index.ts

@@ -58,3 +58,4 @@ export * from './use-toast-logic';
 export * from './use-banner-telemetry';
 export * from './use-tooltip-fallback-placement';
 export * from './use-anchor-positioning';
+export * from './use-scroll-item-into-view';

package/src/core/hooks/menu/use-mobile-menu-items.ts

@@ -1,21 +1,36 @@
+import { useMemo } from 'react';
 import { useLocation } from 'react-router';
 
-import type { ResolvedNavItem } from '@redocly/config';
+import type { ResolvedNavItem, Version } from '@redocly/config';
 
 import { useThemeHooks } from '../use-theme-hooks';
 import { useThemeConfig } from '../use-theme-config';
 import { MobileMenuType } from '../../constants/common';
-import { buildLanguagesGroup, buildVersionSection, mapNavbarItems } from '../../utils/menu';
+import {
+  buildLanguagesGroup,
+  buildNavigationTabsSelect,
+  buildVersionSection,
+  mapNavbarItems,
+} from '../../utils/menu';
 
 const MENU_SEPARATOR: ResolvedNavItem = {
   type: 'separator',
   separatorLine: true,
 };
 
+const NO_VERSIONS: Version[] = [];
+const NO_NAV_ITEMS: ResolvedNavItem[] = [];
+
 export const useMobileMenuItems = (menuType: MobileMenuType) => {
-  const { useTranslate, useL10nConfig, useCurrentProduct, usePageVersions, useSidebarItems } =
-    useThemeHooks();
-  const { versions = [] } = usePageVersions() || {};
+  const {
+    useTranslate,
+    useL10nConfig,
+    useCurrentProduct,
+    usePageVersions,
+    useSidebarItems,
+    useNavigationTabs,
+  } = useThemeHooks();
+  const versions = usePageVersions()?.versions ?? NO_VERSIONS;
   const { defaultLocale, currentLocale, locales } = useL10nConfig();
   const { translate } = useTranslate();
   const activeVersion = versions.find((version) => version.active);
@@ -25,6 +40,7 @@ export const useMobileMenuItems = (menuType: MobileMenuType) => {
     popDrilldownState,
     backLink,
   } = useSidebarItems(activeVersion);
+  const navigationTabs = useNavigationTabs();
   const location = useLocation();
 
   const currentProduct = useCurrentProduct();
@@ -33,74 +49,93 @@ export const useMobileMenuItems = (menuType: MobileMenuType) => {
   const productThemeConfig = useThemeConfig();
   const baseThemeConfig = useThemeConfig(false);
 
-  const baseNavItems = (baseThemeConfig.navbar?.items || []) as ResolvedNavItem[];
+  const baseNavItems = (baseThemeConfig.navbar?.items ?? NO_NAV_ITEMS) as ResolvedNavItem[];
   const productNavItems = (
-    hasProductNavbarOverride ? productThemeConfig.navbar?.items || [] : []
+    hasProductNavbarOverride ? (productThemeConfig.navbar?.items ?? NO_NAV_ITEMS) : NO_NAV_ITEMS
   ) as ResolvedNavItem[];
-
-  const menuItems: ResolvedNavItem[] = [];
-
-  if (menuType === MobileMenuType.PAGE) {
-    if (activeVersion) {
-      // eslint-disable-next-line no-warning-comments
-      // TODO: consider to refactor
-      const versionsSection = buildVersionSection(translate, versions, activeVersion);
-      menuItems.push(...versionsSection);
-    }
-    if (menuItems.length && sidebarItems.length) {
-      menuItems.push(MENU_SEPARATOR);
-    }
-    menuItems.push(...(sidebarItems as ResolvedNavItem[]));
-  } else if (menuType === MobileMenuType.PRODUCT) {
-    menuItems.push(...productNavItems);
-
-    if (menuItems.length && baseNavItems.length) {
-      menuItems.push(MENU_SEPARATOR);
-    }
-
-    if (baseNavItems.length) {
-      menuItems.push(...baseNavItems);
-    }
-  } else if (menuType === MobileMenuType.MAIN_MENU) {
-    const productMenuItems: ResolvedNavItem[] = Object.values(baseThemeConfig.products || {}).map(
-      (product) => ({
+  const products = baseThemeConfig.products;
+
+  const items = useMemo(() => {
+    const menuItems: ResolvedNavItem[] = [];
+    const navigationTabsSelect =
+      menuType === MobileMenuType.PAGE ? buildNavigationTabsSelect({ navigationTabs }) : undefined;
+
+    if (menuType === MobileMenuType.PAGE) {
+      if (activeVersion) {
+        menuItems.push(...buildVersionSection(translate, versions, activeVersion));
+      }
+      if (menuItems.length && sidebarItems.length) {
+        menuItems.push(MENU_SEPARATOR);
+      }
+      menuItems.push(...(sidebarItems as ResolvedNavItem[]));
+    } else if (menuType === MobileMenuType.PRODUCT) {
+      menuItems.push(...productNavItems);
+
+      if (menuItems.length && baseNavItems.length) {
+        menuItems.push(MENU_SEPARATOR);
+      }
+
+      if (baseNavItems.length) {
+        menuItems.push(...baseNavItems);
+      }
+    } else if (menuType === MobileMenuType.MAIN_MENU) {
+      const productMenuItems: ResolvedNavItem[] = Object.values(products || {}).map((product) => ({
         label: product.name,
         link: product.link,
         icon: product.icon,
         type: 'link',
-      }),
-    );
+      }));
+
+      if (productMenuItems.length) {
+        menuItems.push({
+          type: 'separator',
+          label: translate('mobileMenu.products', 'Products'),
+        });
 
-    if (productMenuItems.length) {
-      menuItems.push({
-        type: 'separator',
-        label: translate('mobileMenu.products', 'Products'),
-      });
+        menuItems.push(...productMenuItems);
+      }
 
-      menuItems.push(...productMenuItems);
+      if (menuItems.length && baseNavItems.length) {
+        menuItems.push(MENU_SEPARATOR);
+      }
+
+      if (baseNavItems.length) {
+        menuItems.push(...baseNavItems);
+      }
     }
 
-    if (menuItems.length && baseNavItems.length) {
+    const languagesMenu = buildLanguagesGroup(locales, defaultLocale, currentLocale);
+
+    if (menuItems.length && languagesMenu) {
       menuItems.push(MENU_SEPARATOR);
     }
 
-    if (baseNavItems.length) {
-      menuItems.push(...baseNavItems);
+    if (languagesMenu) {
+      menuItems.push(languagesMenu);
     }
-  }
-
-  const languagesMenu = buildLanguagesGroup(locales, defaultLocale, currentLocale);
-
-  if (menuItems.length && languagesMenu) {
-    menuItems.push(MENU_SEPARATOR);
-  }
 
-  if (languagesMenu) {
-    menuItems.push(languagesMenu);
-  }
+    return [
+      ...(navigationTabsSelect ? [navigationTabsSelect] : []),
+      ...mapNavbarItems(menuItems, defaultLocale, currentLocale, locales, location),
+    ];
+  }, [
+    menuType,
+    navigationTabs,
+    activeVersion,
+    versions,
+    sidebarItems,
+    productNavItems,
+    baseNavItems,
+    products,
+    translate,
+    locales,
+    defaultLocale,
+    currentLocale,
+    location,
+  ]);
 
   return {
-    items: mapNavbarItems(menuItems, defaultLocale, currentLocale, locales, location),
+    items,
     popDrilldownState,
     pushDrilldownState,
     backLink,

package/src/core/hooks/menu/use-mobile-menu-levels.ts

@@ -8,27 +8,35 @@ import { useThemeConfig } from '../use-theme-config';
 import { MobileMenuType } from '../../constants/common';
 
 export const useMobileMenuLevels = () => {
-  const { useTranslate, useCurrentProduct, usePageVersions, useSidebarItems } = useThemeHooks();
+  const { useTranslate, useCurrentProduct, usePageVersions, useSidebarItems, useNavigationTabs } =
+    useThemeHooks();
   const { versions = [] } = usePageVersions() || {};
   const activeVersion = versions.find((version) => version?.active);
   const { currentItems: sidebarItems } = useSidebarItems(activeVersion);
+  const navigationTabs = useNavigationTabs();
   const { translate } = useTranslate();
   const currentProduct = useCurrentProduct();
   const productThemeConfig = useThemeConfig();
+  const baseThemeConfig = useThemeConfig(false);
   const location = useLocation();
 
   const hasProductNavbarOverride = currentProduct?.configOverride?.navbar;
   const productNavItems = (
     hasProductNavbarOverride ? productThemeConfig.navbar?.items || [] : []
   ) as ResolvedNavItem[];
+  const hasMainMenuItems =
+    Object.values(baseThemeConfig.products || {}).length > 0 ||
+    (baseThemeConfig.navbar?.items || []).length > 0;
 
   const menuLevels = useMemo(() => {
-    const menuLevels = [
-      {
+    const menuLevels: Array<{ label: string; type: MobileMenuType }> = [];
+
+    if (hasMainMenuItems) {
+      menuLevels.push({
         label: translate('mobileMenu.mainMenu', 'Main menu'),
         type: MobileMenuType.MAIN_MENU,
-      },
-    ];
+      });
+    }
 
     if (currentProduct && productNavItems.length) {
       menuLevels.push({
@@ -37,7 +45,7 @@ export const useMobileMenuLevels = () => {
       });
     }
 
-    if (sidebarItems.length || activeVersion) {
+    if (sidebarItems.length || activeVersion || navigationTabs?.tabs.length) {
       menuLevels.push({
         label: translate('mobileMenu.previous', 'Previous'),
         type: MobileMenuType.PAGE,

package/src/core/hooks/use-scroll-item-into-view.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+import type { RefObject } from 'react';
+
+export function useScrollItemIntoView(
+  listRef: RefObject<HTMLElement | null>,
+  activeIndex: number,
+): void {
+  useEffect(() => {
+    const list = listRef.current;
+    const activeItem = activeIndex === -1 ? undefined : list?.children[activeIndex];
+    if (!list || !activeItem) return;
+
+    const listRect = list.getBoundingClientRect();
+    const itemRect = activeItem.getBoundingClientRect();
+    list.scrollLeft += itemRect.left - listRect.left - (listRect.width - itemRect.width) / 2;
+  }, [listRef, activeIndex]);
+}

package/src/core/hooks/use-theme-hooks.ts

@@ -39,6 +39,8 @@ const fallbacks = {
   usePageProps: () => ({}),
   usePageSharedData: () => null,
   useMcpData: () => ({ docs: { enabled: false } }),
+  useSearchFeatures: () => ({}),
+  useNavigationTabs: () => undefined,
 };
 
 export const useThemeHooks = () => {

package/src/core/styles/global.ts

@@ -49,6 +49,8 @@ import { pageActions } from '@redocly/theme/components/PageActions/variables';
 import { svgViewer } from '@redocly/theme/components/SvgViewer/variables';
 import { toast } from '@redocly/theme/components/Toast/variables';
 import { pageNavigation } from '@redocly/theme/components/PageNavigation/variables';
+import { navigationTabs } from '@redocly/theme/components/NavigationTabs/variables';
+import { breakpoints } from '@redocly/theme/core/utils';
 
 import { activeBrandPaletteLight } from './palette';
 import { darkMode } from './dark';
@@ -1125,8 +1127,8 @@ const error = css`
   --detailed-error-overlay-z-index: var(--z-index-raised);
 
   --detailed-error-modal-width: calc(100% - var(--spacing-lg) * 2);
-  --detailed-error-modal-height: calc(100vh - var(--navbar-height) - var(--spacing-lg) * 2);
-  --detailed-error-modal-top: calc(var(--spacing-lg) + var(--navbar-height));
+  --detailed-error-modal-height: calc(100vh - var(--navbar-stack-height) - var(--spacing-lg) * 2);
+  --detailed-error-modal-top: calc(var(--spacing-lg) + var(--navbar-stack-height));
   --detailed-error-modal-border-radius: var(--border-radius-md);
   --detailed-error-modal-bg-color: var(--bg-color-raised);
   --detailed-error-modal-color: var(--text-color-primary);
@@ -1373,6 +1375,7 @@ export const styles = css<{ palette?: string }>`
     ${productPicker}
     ${responsePanelColors}
     ${search}
+    ${navigationTabs}
     ${select}
     ${sidebar}
     ${sizeAndSpace}
@@ -1413,6 +1416,13 @@ export const styles = css<{ palette?: string }>`
     ${darkMode};
   }
 
+  @media screen and (min-width: ${breakpoints.medium}) {
+    :root:has([data-component-name='NavigationTabs/NavigationTabs']) {
+      --navbar-stack-height: calc(var(--navbar-height) + var(--navigation-tabs-height, 48px));
+      --navbar-row-bottom-border-color: transparent;
+    }
+  }
+
   :root.notransition * {
     transition: none !important;
   }

package/src/core/types/hooks.ts

@@ -28,6 +28,7 @@ import type {
 } from './catalog';
 import type { UserMenuData } from './user-menu';
 import type { ItemState, DrilldownMenuItemDetails } from './sidebar';
+import type { NavigationTabsState } from './navigation-tabs';
 import type {
   SearchItemData,
   SearchFacet,
@@ -119,6 +120,9 @@ export type ThemeHooks = {
     askAi?: boolean;
     retrySearch: () => Promise<void>;
   };
+  useSearchFeatures: () => {
+    askAi?: boolean;
+  };
   useAiSearch: (options?: { filter?: SearchFilterItem[]; product?: string }) => {
     askQuestion: (question: string, history?: AiSearchConversationItem[]) => void;
     isGeneratingResponse: boolean;
@@ -156,6 +160,7 @@ export type ThemeHooks = {
     pushDrilldownState: (drilldownDetails: DrilldownMenuItemDetails) => void;
     backLink?: { slug?: string; label?: string };
   };
+  useNavigationTabs: () => NavigationTabsState | undefined;
   useSidebarSiblingsData: () =>
     | {
         prevPage?: ResolvedNavItemWithLink;

package/src/core/types/index.ts

@@ -7,6 +7,7 @@ export type * from './feedback';
 export type * from './hooks';
 export type * from './markdown';
 export type * from './navbar';
+export type * from './navigation-tabs';
 export * from './search';
 export type * from './select';
 export type * from './sidebar';

package/src/core/types/l10n.ts

@@ -222,6 +222,7 @@ export type TranslationKey =
   | 'catalog.history.revision.current'
   | 'catalog.history.revisions.showLess'
   | 'catalog.history.revisions.showMore'
+  | 'navigationTabs.label'
   | 'sidebar.menu.backLabel'
   | 'sidebar.menu.backToLabel'
   | 'sidebar.actions.show'
@@ -271,6 +272,7 @@ export type TranslationKey =
   | 'mobileMenu.previous'
   | 'mobileMenu.products'
   | 'mobileMenu.version'
+  | 'navbar.label'
   | 'navbar.products'
   | 'page.nextButton'
   | 'page.previousButton'
@@ -360,6 +362,7 @@ export type TranslationKey =
   | 'openapi.hideExample'
   | 'openapi.showExample'
   | 'openapi.expandAll'
+  | 'openapi.deepLink.tooltip'
   | 'openapi.collapseAll'
   | 'openapi.viewSecurityDetails'
   | 'openapi.noResponseExample'

package/src/core/types/navigation-tabs.ts

@@ -0,0 +1,54 @@
+export type NavigationTabMenuEntry = {
+  tabId: string;
+  label: string;
+  labelTranslationKey?: string;
+  link: string;
+  icon?: string;
+  srcSet?: string;
+  external?: boolean;
+  target?: '_self' | '_blank';
+};
+
+export type NavigationTab = {
+  tabId: string;
+  label: string;
+  labelTranslationKey?: string;
+  link?: string;
+  icon?: string;
+  srcSet?: string;
+  menu?: NavigationTabMenuEntry[];
+};
+
+export type NavigationTabsState = {
+  tabs: NavigationTab[];
+  activeTab?: NavigationTab;
+  activeMenuEntry?: NavigationTabMenuEntry;
+};
+
+export type NavigationTabItem = {
+  type: 'link';
+  label: string;
+  labelTranslationKey?: string;
+  link: string;
+  icon?: string;
+  srcSet?: string;
+  external?: boolean;
+  target?: '_self' | '_blank';
+  active?: boolean;
+};
+
+type NavigationTabGroupItem = {
+  type: 'group';
+  label: string;
+  labelTranslationKey?: string;
+  icon?: string;
+  srcSet?: string;
+  items: NavigationTabItem[];
+  active?: boolean;
+};
+
+export type NavigationTabRowItem = NavigationTabItem | NavigationTabGroupItem;
+
+export type NavigationTabsConfig = {
+  items: NavigationTabRowItem[];
+};

package/src/core/utils/index.ts

@@ -17,6 +17,7 @@ export * from './type-guards';
 export * from './dom';
 export * from './toc';
 export * from './menu';
+export * from './navigation-tabs';
 export * from './load-and-navigate';
 export * from './get-scorecard-color-variable';
 export * from './change-text-casing';