@redocly/theme 0.70.0-next.1 → 0.70.0-next.11

package/src/components/JsonViewer/JsonViewer.tsx

@@ -5,7 +5,8 @@ import type { JSX } from 'react';
 import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
 
 import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
-import { JsonValue } from '@redocly/theme/components/JsonViewer/Helpers';
+import { collectFoldables, JsonValue } from '@redocly/theme/components/JsonViewer/Helpers';
+import type { JsonFold } from '@redocly/theme/components/JsonViewer/Helpers';
 
 export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-samples';
 
@@ -33,25 +34,20 @@ function JsonComponent({
   controls = {},
   maxStringLength,
 }: JsonProps): JSX.Element {
-  const showFoldingButtons =
-    data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
+  const defaultExpandLevel = Math.max(1, expandLevel);
+  const foldables = React.useMemo(() => collectFoldables(data), [data]);
+  const [expandedPaths, setExpandedPaths] = React.useState<Record<string, boolean>>({});
 
-  const [expandAllSignal, setExpandAllSignal] = React.useState<boolean | undefined>(undefined);
-
-  const expandAll = () => {
-    setExpandAllSignal(true);
-    onPanelToggle?.(true);
-    setTimeout(() => {
-      setExpandAllSignal(undefined);
-    });
+  const fold: JsonFold = {
+    isExpanded: (path, level) => expandedPaths[path] ?? level < defaultExpandLevel,
+    setExpanded: (path, expanded) => setExpandedPaths((prev) => ({ ...prev, [path]: expanded })),
   };
+  const hasFoldables = foldables.length > 0;
+  const allExpanded = foldables.every(([path, level]) => fold.isExpanded(path, level));
 
-  const collapseAll = () => {
-    setExpandAllSignal(false);
-    onPanelToggle?.(false);
-    setTimeout(() => {
-      setExpandAllSignal(undefined);
-    });
+  const toggleAll = () => {
+    onPanelToggle?.(!allExpanded);
+    setExpandedPaths(Object.fromEntries(foldables.map(([path]) => [path, !allExpanded])));
   };
 
   const source = JSON.stringify(data, null, 2);
@@ -73,12 +69,14 @@ function JsonComponent({
                 controls: controls && {
                   ...controls,
                   copy: { ...controls.copy, data, onClick: onCopyClick, handleOutside: true },
-                  expand: showFoldingButtons
-                    ? { ...controls.expand, onClick: expandAll }
-                    : undefined,
-                  collapse: showFoldingButtons
-                    ? { ...controls.collapse, onClick: collapseAll }
-                    : undefined,
+                  expand:
+                    hasFoldables && !allExpanded
+                      ? { ...controls.expand, onClick: toggleAll }
+                      : undefined,
+                  collapse:
+                    hasFoldables && allExpanded
+                      ? { ...controls.collapse, onClick: toggleAll }
+                      : undefined,
                 },
               }
             : undefined
@@ -89,9 +87,9 @@ function JsonComponent({
           <JsonValue
             value={data}
             level={0}
+            path=""
             standalone={true}
-            expandAllSignal={expandAllSignal}
-            defaultExpandLevel={Math.max(1, expandLevel)}
+            fold={fold}
             maxStringLength={maxStringLength}
           />
         </FoldingWrap>

package/src/components/LoadProgressBar/LoadProgressBar.tsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+
+import { isLoadInProgress, subscribeToLoadProgress } from '@redocly/theme/core/utils';
+
+export type LoadProgressBarProps = {
+  /** Also shows the bar while the host's own navigation is pending. */
+  pending?: boolean;
+  className?: string;
+};
+
+const START = 0.08;
+const MAX_PENDING = 0.994;
+const TRICKLE_MS = 100;
+const SETTLE_MS = 200;
+// [below, step]: large steps at first, smaller ones near the end.
+const TRICKLE_STEPS = [
+  [0.2, 0.1],
+  [0.5, 0.04],
+  [0.8, 0.02],
+  [0.99, 0.005],
+] as const;
+
+function trickle(progress: number): number {
+  const step = TRICKLE_STEPS.find(([below]) => progress < below)?.[1] ?? 0;
+  return Math.min(progress + step, MAX_PENDING);
+}
+
+/** A top-of-page bar while a page load is pending. */
+export function LoadProgressBar({
+  pending = false,
+  className,
+}: LoadProgressBarProps): JSX.Element | null {
+  const loading = useSyncExternalStore(subscribeToLoadProgress, isLoadInProgress, () => false);
+  const active = pending || loading;
+  const [progress, setProgress] = useState<number | null>(null);
+  const [fading, setFading] = useState(false);
+  const shown = useRef(false);
+
+  useEffect(() => {
+    if (active) {
+      shown.current = true;
+      setFading(false);
+      setProgress((current) => (current === null || current === 1 ? START : current));
+      const timer = setInterval(
+        () => setProgress((current) => trickle(current ?? START)),
+        TRICKLE_MS,
+      );
+      return () => clearInterval(timer);
+    }
+    if (!shown.current) return undefined;
+
+    setProgress(1);
+    const fade = setTimeout(() => setFading(true), SETTLE_MS);
+    const hide = setTimeout(() => {
+      shown.current = false;
+      setProgress(null);
+      setFading(false);
+    }, SETTLE_MS * 2);
+    return () => {
+      clearTimeout(fade);
+      clearTimeout(hide);
+    };
+  }, [active]);
+
+  if (progress === null) return null;
+
+  // The id and class names come from the replaced nprogress library: custom styles target them.
+  return (
+    <LoadProgressBarWrapper
+      id="nprogress"
+      data-component-name="LoadProgressBar/LoadProgressBar"
+      className={className}
+      aria-hidden="true"
+      $fading={fading}
+    >
+      <Bar className="bar" $progress={progress}>
+        <Peg className="peg" />
+      </Bar>
+    </LoadProgressBarWrapper>
+  );
+}
+
+const LoadProgressBarWrapper = styled.div<{ $fading: boolean }>`
+  pointer-events: none;
+  opacity: ${({ $fading }) => ($fading ? 0 : 1)};
+  transition: opacity ${SETTLE_MS}ms linear;
+`;
+
+// The offset changes on each tick: as a styled rule, each value would add a class.
+const Bar = styled.div.attrs<{ $progress: number }>(({ $progress }) => ({
+  style: { transform: `translate3d(${($progress - 1) * 100}%, 0, 0)` },
+}))`
+  position: fixed;
+  z-index: var(--z-index-popover);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--load-progress-bar-height);
+  background: var(--load-progress-bar-color);
+  transition: transform ${SETTLE_MS}ms ease;
+`;
+
+const Peg = styled.div`
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow: var(--load-progress-bar-shadow);
+  transform: rotate(3deg) translate(0, -4px);
+`;

package/src/components/MCP/McpConnectionTabs.tsx

@@ -10,9 +10,11 @@ import { useMCPConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import {
   generateClaudeCodeCommand,
   generateCodexCommand,
+  generateMCPDeepLink,
   generateMcpInstallPrompt,
   getBaseDataAttributes,
 } from '@redocly/theme/core/utils';
+import { Button } from '@redocly/theme/components/Button/Button';
 import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
 import { ClaudeIcon } from '@redocly/theme/icons/ClaudeIcon/ClaudeIcon';
 import { ChatGptIcon } from '@redocly/theme/icons/ChatGptIcon/ChatGptIcon';
@@ -167,16 +169,26 @@ function renderTabContent(
           ),
         },
         {
-          headline: translate(
-            'page.mcpNotAllowed.snippets.claudeDesktop.headline',
-            'Claude Desktop',
-          ),
+          headline: translate('page.mcpNotAllowed.snippets.claudeDesktop.headline', 'Claude app'),
           content: (
             <>
+              <TabHint>
+                {translate(
+                  'page.mcpNotAllowed.snippets.claudeDesktop.accountHint',
+                  'Claude adds the connector to your account and syncs it between Claude on the web and Claude Desktop.',
+                )}
+              </TabHint>
+              <ConnectButton
+                variant="secondary"
+                icon={<ClaudeIcon />}
+                onClick={() => window.open(generateMCPDeepLink('claude', connection), '_blank')}
+              >
+                {translate('page.actions.connectMcp.claude', 'Connect to Claude')}
+              </ConnectButton>
               <TabHint>
                 {translate(
                   'page.mcpNotAllowed.snippets.claudeDesktop.instruction',
-                  'Open Customize → Connectors → Add custom connector and paste this server URL:',
+                  'Or open Customize → Connectors → Add custom connector and paste this server URL:',
                 )}
               </TabHint>
               <CodeBlock
@@ -278,6 +290,11 @@ const McpConnectionTabsWrapper = styled.div`
   }
 `;
 
+const ConnectButton = styled(Button)`
+  align-self: flex-start;
+  margin-bottom: var(--spacing-sm);
+`;
+
 const TabHint = styled.p`
   margin: 0 0 var(--spacing-xs);
   color: var(--page-mcp-405-snippets-hint-text-color);

package/src/components/Markdown/Markdown.tsx

@@ -71,7 +71,7 @@ export const Markdown = styled.main
   ${markdownLinksCss}
 
   a[name], [id] {
-    scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
+    scroll-margin-top: var(--navbar-offset);
   }
 
   img,
@@ -84,7 +84,7 @@ export const Markdown = styled.main
     font-family: var(--heading-font-family);
     position: relative;
 
-    scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
+    scroll-margin-top: var(--navbar-offset);
     ${headingAnchorCss(ANCHOR_CLASS)};
 
     h1,
@@ -295,6 +295,7 @@ export const Markdown = styled.main
       font-size: inherit;
       font-family: inherit;
       border: none;
+      padding: 0;
     }
   }
 

package/src/components/Markdown/styles/base-table.ts

@@ -22,7 +22,7 @@ export const markdownBaseTableCss = css`
       color: var(--md-table-cell-text-color);
       font-size: var(--md-table-font-size);
       line-height: var(--md-table-line-height);
-      vertical-align: top;
+      vertical-align: var(--md-table-cell-vertical-align);
     }
 
     thead td,
@@ -71,5 +71,18 @@ export const markdownBaseTableCss = css`
     th[align='right'] {
       text-align: right;
     }
+
+    th[valign='top'],
+    td[valign='top'] {
+      vertical-align: top;
+    }
+    th[valign='middle'],
+    td[valign='middle'] {
+      vertical-align: middle;
+    }
+    th[valign='bottom'],
+    td[valign='bottom'] {
+      vertical-align: bottom;
+    }
   }
 `;

package/src/components/Markdown/variables.ts

@@ -51,6 +51,7 @@ export const markdown = css`
   --md-table-cell-text-color: var(--text-color-secondary); // @presenter Color
   --md-table-cell-padding: var(--spacing-xs) var(--spacing-sm); // @presenter Spacing
   --md-table-footer-cell-padding: var(--spacing-xxs) var(--spacing-sm); // @presenter Spacing
+  --md-table-cell-vertical-align: top;
 
   --md-table-head-bg-color: var(--md-table-bg-color); // @presenter Color
   --md-table-head-text-color: var(--text-color-primary); // @presenter Color

package/src/components/Menu/Menu.tsx

@@ -5,6 +5,7 @@ import type { JSX } from 'react';
 import type { DrilldownMenuItemDetails, ItemState } from '@redocly/theme/core/types';
 
 import { MenuItem } from '@redocly/theme/components/Menu/MenuItem';
+import { MenuSelect } from '@redocly/theme/components/Menu/MenuSelect';
 import { MenuItemType } from '@redocly/theme/core/constants';
 import { getMenuItemType } from '@redocly/theme/core/utils';
 
@@ -28,6 +29,10 @@ export function Menu({
   return (
     <MenuWrapper className={className} data-component-name="Menu/Menu">
       {items.map((item, index) => {
+        if (getMenuItemType(item) === MenuItemType.Select) {
+          return <MenuSelect item={item} key={`${item.label}-${index}`} />;
+        }
+
         return (
           <MenuItem
             item={item}

package/src/components/Menu/MenuSelect.tsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { ItemState } from '@redocly/theme/core/types';
+
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
+import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+import { CheckmarkIcon } from '@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon';
+
+export type MenuSelectProps = {
+  item: ItemState;
+  className?: string;
+};
+
+export function MenuSelect({ item, className }: MenuSelectProps): JSX.Element {
+  const { useTranslate, useTelemetry } = useThemeHooks();
+  const { translate } = useTranslate();
+  const telemetry = useTelemetry();
+
+  return (
+    <MenuSelectWrapper data-component-name="Menu/MenuSelect" className={className} role="listitem">
+      <MenuSelectDropdown
+        alignment="start"
+        trigger={
+          <MenuSelectTrigger type="button">
+            <MenuSelectLabel>{translate(item.labelTranslationKey, item.label)}</MenuSelectLabel>
+            <MenuSelectChevron
+              size="var(--menu-select-icon-size)"
+              color="--menu-select-icon-color"
+            />
+          </MenuSelectTrigger>
+        }
+      >
+        <MenuSelectMenu>
+          {item.items.map((option, index) => {
+            const key = `${option.link || option.label}-${index}`;
+            const checkmark = option.active ? (
+              <MenuSelectCheckmark size="var(--menu-select-option-checkmark-size)" />
+            ) : null;
+            const content = (
+              <MenuSelectOptionContent $active={option.active}>
+                {option.icon || option.srcSet ? (
+                  <MenuSelectOptionIcon icon={option.icon} srcSet={option.srcSet} />
+                ) : null}
+                {translate(option.labelTranslationKey, option.label)}
+                {option.external ? (
+                  <LaunchIcon size="var(--menu-select-option-external-icon-size)" />
+                ) : null}
+              </MenuSelectOptionContent>
+            );
+
+            if (!option.link) {
+              return (
+                <MenuSelectOption
+                  key={key}
+                  active={option.active}
+                  prefix={checkmark}
+                  dataAttributes={{ 'aria-disabled': 'true' }}
+                >
+                  {content}
+                </MenuSelectOption>
+              );
+            }
+
+            return (
+              <MenuSelectOption
+                key={key}
+                to={option.link}
+                external={option.external}
+                target={option.target === '_blank' ? '_blank' : undefined}
+                active={option.active}
+                aria-current={option.active ? 'page' : undefined}
+                prefix={checkmark}
+                onAction={() =>
+                  telemetry.sendSidebarItemClickedMessage([
+                    {
+                      ...getBaseDataAttributes('sidebarItem', 'sidebar'),
+                      label: option.label,
+                      type: 'link',
+                    },
+                  ])
+                }
+              >
+                {content}
+              </MenuSelectOption>
+            );
+          })}
+        </MenuSelectMenu>
+      </MenuSelectDropdown>
+    </MenuSelectWrapper>
+  );
+}
+
+const MenuSelectWrapper = styled.div`
+  margin: var(--menu-select-margin);
+`;
+
+const MenuSelectDropdown = styled(Dropdown)`
+  --dropdown-menu-padding-top: var(--menu-select-menu-offset);
+  --dropdown-menu-padding: var(--menu-select-menu-padding);
+  --dropdown-menu-border-radius: var(--menu-select-menu-border-radius);
+  --dropdown-menu-item-gap: var(--menu-select-option-gap);
+  --dropdown-menu-item-border-radius: var(--menu-select-option-border-radius);
+  --dropdown-menu-item-bg-color-active: var(--menu-select-option-bg-color-active);
+  --dropdown-menu-item-color-active: var(--menu-select-option-text-color-active);
+
+  width: 100%;
+
+  > * {
+    min-width: 100%;
+  }
+`;
+
+const MenuSelectChevron = styled(ChevronDownIcon)`
+  transition: var(--menu-select-transition);
+`;
+
+const MenuSelectTrigger = styled.button`
+  display: flex;
+  align-items: center;
+  gap: var(--menu-select-gap);
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--menu-select-height);
+  padding: 0 var(--menu-select-padding-horizontal);
+  border: var(--menu-select-border);
+  border-radius: var(--menu-select-border-radius);
+  background-color: var(--menu-select-bg-color);
+  color: var(--menu-select-text-color);
+  font-family: inherit;
+  font-size: var(--menu-select-font-size);
+  line-height: var(--menu-select-line-height);
+  text-align: left;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 1px solid var(--menu-select-border-color-focused);
+  }
+
+  &[aria-expanded='true'] ${MenuSelectChevron} {
+    transform: rotate(180deg);
+  }
+`;
+
+const MenuSelectLabel = styled.span`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const MenuSelectMenu = styled(DropdownMenu)`
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+`;
+
+const MenuSelectOption = styled(DropdownMenuItem)`
+  position: relative;
+  box-sizing: border-box;
+  padding: var(--menu-select-option-padding);
+
+  &[aria-disabled='true'] {
+    cursor: default;
+    pointer-events: none;
+  }
+`;
+
+const MenuSelectCheckmark = styled(CheckmarkIcon)`
+  position: absolute;
+  top: 50%;
+  left: var(--menu-select-option-checkmark-offset);
+  transform: translateY(-50%);
+`;
+
+const MenuSelectOptionContent = styled.span<{ $active: boolean }>`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--menu-select-option-content-gap);
+  font-weight: ${({ $active }) =>
+    $active
+      ? 'var(--menu-select-option-font-weight-active)'
+      : 'var(--menu-select-option-font-weight)'};
+`;
+
+const MenuSelectOptionIcon = styled(GenericIcon)`
+  --icon-width: var(--menu-select-option-icon-size);
+  --icon-height: var(--menu-select-option-icon-size);
+  flex-shrink: 0;
+`;

package/src/components/Menu/variables.ts

@@ -102,6 +102,45 @@ export const menu = css`
   --menu-back-button-gap: var(--spacing-xs);
   --menu-back-button-icon: none;
 
+  /**
+   * @tokens Menu select
+   */
+  --menu-select-margin-top: 0;
+  --menu-select-margin-bottom: var(--spacing-xs);
+  --menu-select-margin-horizontal: var(--menu-item-label-margin-horizontal);
+  --menu-select-margin: var(--menu-select-margin-top) var(--menu-select-margin-horizontal) var(--menu-select-margin-bottom); // @presenter Spacing
+  --menu-select-height: 32px; // @presenter Spacing
+  --menu-select-padding-horizontal: calc(var(--spacing-sm) - var(--border-width)); // @presenter Spacing
+  --menu-select-gap: var(--spacing-xxs); // @presenter Spacing
+  --menu-select-font-size: var(--font-size-base); // @presenter FontSize
+  --menu-select-line-height: var(--line-height-base); // @presenter LineHeight
+  --menu-select-text-color: var(--input-content-color-active); // @presenter Color
+  --menu-select-bg-color: var(--input-bg-color); // @presenter Color
+  --menu-select-border: var(--input-border); // @presenter Border
+  --menu-select-border-color-focused: var(--input-border-color-focused); // @presenter Color
+  --menu-select-border-radius: var(--input-border-radius); // @presenter BorderRadius
+  --menu-select-icon-size: 16px;
+  --menu-select-icon-color: var(--icon-color-secondary); // @presenter Color
+  --menu-select-transition: transform 150ms ease-in-out;
+  --menu-select-menu-offset: var(--spacing-xs); // @presenter Spacing
+  --menu-select-menu-padding: calc(var(--dropdown-menu-padding) - var(--border-width)); // @presenter Spacing
+  --menu-select-menu-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --menu-select-option-gap: calc(var(--spacing-unit) / 2); // @presenter Spacing
+  --menu-select-option-content-gap: var(--spacing-xs); // @presenter Spacing
+  --menu-select-option-padding-vertical: var(--dropdown-menu-item-padding-vertical);
+  --menu-select-option-padding-left: var(--spacing-md);
+  --menu-select-option-padding-right: var(--spacing-sm);
+  --menu-select-option-padding: var(--menu-select-option-padding-vertical) var(--menu-select-option-padding-right) var(--menu-select-option-padding-vertical) var(--menu-select-option-padding-left); // @presenter Spacing
+  --menu-select-option-border-radius: var(--border-radius-md); // @presenter BorderRadius
+  --menu-select-option-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --menu-select-option-font-weight-active: var(--font-weight-medium); // @presenter FontWeight
+  --menu-select-option-text-color-active: var(--text-color-primary); // @presenter Color
+  --menu-select-option-bg-color-active: transparent; // @presenter Color
+  --menu-select-option-icon-size: var(--menu-item-icon-size);
+  --menu-select-option-external-icon-size: var(--menu-item-external-icon-size);
+  --menu-select-option-checkmark-size: 14px;
+  --menu-select-option-checkmark-offset: calc((var(--menu-select-option-padding-left) - var(--menu-select-option-checkmark-size)) / 2);
+
   /**
    * @tokens Menu items
    */
@@ -133,18 +172,18 @@ export const mobileMenu = css`
     * @tokens Mobile Menu
     * */
   /* Fallback for older browsers. dvh accounts for dynamic UI elements like mobile address bars */
-  --menu-mobile-height: calc(100vh - var(--navbar-height) - var(--banner-height));
-  --menu-mobile-height: calc(100dvh - var(--navbar-height) - var(--banner-height));
+  --menu-mobile-height: calc(100vh - var(--navbar-offset));
+  --menu-mobile-height: calc(100dvh - var(--navbar-offset));
   --menu-mobile-width: 100%;
   --menu-mobile-z-index: var(--z-index-raised);
   --menu-mobile-left: 0;
-  --menu-mobile-top: calc(var(--navbar-height) + var(--banner-height));
+  --menu-mobile-top: var(--navbar-offset);
   --menu-mobile-transition: 0.5s;
   --menu-mobile-bg: var(--bg-color); // @presenter Color
   --menu-mobile-margin: var(--menu-mobile-items-margin-top) var(--menu-mobile-margin-horizontal) 0 var(--menu-mobile-margin-horizontal);
   --menu-mobile-line-height: var(--line-height-base); // @presenter LineHeight
   --menu-mobile-padding-top: var(--spacing-sm); // @presenter Spacing
-  --menu-mobile-margin-horizontal: var(--spacing-xs); // @presenter Spacing
+  --menu-mobile-margin-horizontal: 0; // @presenter Spacing
   --menu-mobile-items-margin-top: var(--spacing-xxs); // @presenter Spacing
 
   --menu-mobile-profile-bg-color: var(--bg-color); // @presenter Color

package/src/components/Navbar/Navbar.tsx

@@ -1,13 +1,18 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
 import type { ResolvedConfigLinks } from '@redocly/config';
 
-import { breakpoints, getBaseDataAttributes } from '@redocly/theme/core/utils';
+import {
+  breakpoints,
+  getBaseDataAttributes,
+  toNavigationTabsConfig,
+} from '@redocly/theme/core/utils';
 import { useThemeHooks, useThemeConfig, useMobileMenu } from '@redocly/theme/core/hooks';
 import { NavbarLogo } from '@redocly/theme/components/Navbar/NavbarLogo';
 import { NavbarMenu } from '@redocly/theme/components/Navbar/NavbarMenu';
+import { NavigationTabs } from '@redocly/theme/components/NavigationTabs/NavigationTabs';
 import { MenuMobile } from '@redocly/theme/components/Menu/MenuMobile';
 import { ColorModeSwitcher } from '@redocly/theme/components/ColorModeSwitcher/ColorModeSwitcher';
 import { Search } from '@redocly/theme/components/Search/Search';
@@ -26,9 +31,15 @@ export type NavbarProps = {
 export function Navbar({ className }: NavbarProps): JSX.Element | null {
   const { isOpen, closeMobileMenu, openMobileMenu } = useMobileMenu(false);
   const themeConfig = useThemeConfig();
-  const { useL10n, useTelemetry } = useThemeHooks();
+  const { useL10n, useTelemetry, useTranslate, useNavigationTabs } = useThemeHooks();
   const { changeLanguage } = useL10n();
+  const { translate } = useTranslate();
   const telemetry = useTelemetry();
+  const navigationTabs = useNavigationTabs();
+  const navigationTabsConfig = useMemo(
+    () => toNavigationTabsConfig({ state: navigationTabs }),
+    [navigationTabs],
+  );
 
   const menu = themeConfig.navbar?.items;
 
@@ -43,7 +54,11 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
   const hideUserMenu = userMenuSettings?.hide;
 
   return (
-    <NavbarWrapper data-component-name="Navbar/Navbar" className={className}>
+    <NavbarWrapper
+      data-component-name="Navbar/Navbar"
+      className={className}
+      aria-label={translate('navbar.label', 'Main navigation')}
+    >
       <Banner />
       {isOpen && <MenuMobile hideUserProfile={!!hideUserMenu} />}
       <NavbarRow>
@@ -76,13 +91,14 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
         />
         {hideUserMenu ? null : <UserMenu />}
       </NavbarRow>
+      {navigationTabsConfig && <NavigationTabs config={navigationTabsConfig} />}
     </NavbarWrapper>
   );
 }
 
 const NavbarWrapper = styled.nav`
   --text-color: var(--navbar-text-color);
-  height: calc(var(--navbar-height) + var(--banner-height));
+  height: var(--navbar-offset, calc(var(--navbar-height) + var(--banner-height)));
   transition: height 0.4s ease-out;
 
   position: sticky;
@@ -123,6 +139,7 @@ const NavbarRow = styled.div`
   box-sizing: border-box;
   margin-top: var(--banner-height);
   transition: margin-top 0.5s ease-out;
+  border-bottom-color: var(--navbar-row-bottom-border-color, var(--navbar-border-color));
 
   @media screen and (min-width: ${breakpoints.max}) {
     max-width: var(--container-max-width);