Settings

Path to the logo in light mode. For example: `/path/to/logo.svg`

Path to the logo in dark mode. For example: `/path/to/logo.svg`

Alternative text for the logo image. The logo is the only content of the link to the home page, so this doubles as that link's accessible name. Defaults to `seo.metatags["og:site_name"]` , then to `"Home"` .

External href to when clicking on the logo

The page to link to when clicking on the logo

The font family to use.

The font weight to use.

The font src to use.

The font format to use.

The primary color of the theme.

The light color of the theme.

The dark color of the theme.

If `true` then the logo will be displayed on the sidebar.

If `true` then the logo will be displayed on the header.

If `true` then the search bar will be displayed as a full width.

If `true` then the search bar will be displayed on the sidebar.

If `true` then the search bar will be displayed in the middle of the header.

If `true` then the search bar will be displayed on the right side of the header.

If `true` then the header external links will display an external arrow.

If `right` then separator will be displayed on the right side of the header.

The type of the header.

The button size of the header.

The tabs to display in the header.

If `true` then the sidebar will display a scroll shadow.

If `true` then the sidebar will display a scroll shadow.

The color of the sidebar scrollbar.

The color of the sidebar scrollbar.

The transition behaviour of the sidebar scroll when navigating to a new page.

Letter-casing of sidebar group headers. Defaults to `"uppercase"` ; set `"none"` to render group labels exactly as authored.

Which element scrolls. `"list"` (default): only the item list scrolls, below the fixed (pinned) region. `"sidebar"` : the WHOLE sidebar scrolls — the scrollbar spans its full height — and the fixed region sticks to the top while items scroll beneath it.

The kind of the table.

If `true` then the banner will have fixed position (always visible).

Content decorator for the theme.

Controls the breadcrumbs. `true` / `false` toggles them; an object ( AppearanceBreadcrumbs ) additionally configures `links` and `rootLevel` (both default `true` ).

If `true` then the section separator will be displayed.

The footer surface.

Trigger chevron behavior when the menu is open. `"rotate"` (default) flips the chevron; `"static"` leaves it unchanged.

Menu item layout. `"flush"` makes the hovered item background touch all four edges of the popover (no surrounding padding); `"padded"` (default) keeps a small inset with rounded item corners.

Route for this sidebar

The group of the route

The id of the route

Sidebar pages within this route or sub routes

The name of the group

Makes the group itself a real page (the "Group Page" feature). When set, the group resolves to this route — so it becomes a clickable breadcrumb automatically. (Clickable group headers in the sidebar are still Coming Soon.)

Label for a `{ page, title }` entry — a page reference with no `group` and no `pages` . It overrides the page's frontmatter title, and is the only way to label a route that has no markdown behind it, such as a generated API reference: without it the sidebar row renders blank.

Page URL type

The icon of the group.

Open this group on load, even when the reader is on a page outside it. Sets the INITIAL state only — it is a default, not a lock: the group still opens by itself when it holds the active page, and a reader who collapses it keeps it collapsed for as long as they stay on the page (like the rest of the sidebar's open state, it starts over on the next one). Only meaningful for a nested group — top-level groups are always open.

The order of the group.

Treat this group's pages as a table of contents instead of real pages. Their markdown files are NOT routable (no routes, no prerender) — the content of every page is injected as a section into the enclosing route's index page, sidebar items scroll to those sections (with scroll-spy active marking), and the right-hand TOC is hidden on that composed page. `true` enables it with defaults; the object form tunes behaviors (all default to enabled).

Object form of NavigationItem.dropdownMenu : the menu items plus menu-level options.

Object form of NavigationItem.dropdownMenu : the menu items plus menu-level options.

How a matched Segment is presented. - `"sidebarDropdown"` — a click dropdown at the top of the sidebar. - `"logoTrailing"` — a hover product-switcher rendered right after the logo (wherever the active theme places its logo — header or sidebar). The trigger shows the active page's title (falling back to the segment `title` ), and the menu is the segment `pages` with a check on the active one. - `"tabs"` — a horizontal tab bar in the sub-navigation, scoped to the segment's `route` . Each `page` is a section: its `page` (a route prefix) decides which tab is active, and its `href` is the landing page the tab links to. Use one route-scoped `tabs` segment per product to get per-product tab bars (e.g. Documentation / API / CLI).

`appearance: { kind: "sidebarDropdown", options }`

Object form of `ComponentPage.component` : an import path plus optional props.

The navigation item title

The navigation item description

The navigation page, if set it redirects to the page + matches based on routing

The navigation href, if set it redirects but does not match based on routing

The navigation item icon

Accent color (any CSS color) for this item. Used by `logoTrailing` product switchers and accent-aware themes (e.g. `terrarium` ) to recolor the UI per product — the active item's `color` is applied as `--theme-color-primary` .

Nested navigation rendered as a dropdown menu under this item. Recursive — a child may itself declare `dropdownMenu` to create submenus (e.g. `api → [Browser SDK, REST API, GraphQL]` ). Supported on header anchors and tabs. Accepts a plain item array, or the object form DropdownMenu carrying menu-level options (e.g. `{ itemsPerColumn: 7, items: [...] }` ).

Render this item on the RIGHT of the header rather than with its siblings, before the search box — for a tab that is a reference you look things up in rather than a stop in the reading order (e.g. an API reference). Honored only by the `tabs` appearance, and there only for `"right"` — the union matches WebEditorHeader , which intersects this type and already carries both values. The item keeps everything a centered tab has, including `dropdownMenu` and route-prefix active highlighting.

Nested navigation items — recursive. Honored ONLY by sidebar-dropdown surfaces ( `navigation.sidebarDropdown` and `appearance: "sidebarDropdown"` segments): an entry with `pages` (typically without `page` / `href` ) renders as an inline-expandable GROUP row inside the dropdown popover — clicking it expands its children (indented) within the same popover. `title` , `icon` , and `description` apply to the group row. Other appearances (tabs, logoTrailing) ignore nesting.

How the `dropdownMenu` opens. Defaults to `"hover"` .

Core interface for navigation items

Core interface for navigation items

Core interface for navigation items

Sidebar route configuration

Sidebar configuration

The navigation item title

The navigation item description

The navigation page, if set it redirects to the page + matches based on routing

The navigation href, if set it redirects but does not match based on routing

The navigation item icon

Accent color (any CSS color) for this item. Used by `logoTrailing` product switchers and accent-aware themes (e.g. `terrarium` ) to recolor the UI per product — the active item's `color` is applied as `--theme-color-primary` .

Nested navigation rendered as a dropdown menu under this item. Recursive — a child may itself declare `dropdownMenu` to create submenus (e.g. `api → [Browser SDK, REST API, GraphQL]` ). Supported on header anchors and tabs. Accepts a plain item array, or the object form DropdownMenu carrying menu-level options (e.g. `{ itemsPerColumn: 7, items: [...] }` ).

Render this item on the RIGHT of the header rather than with its siblings, before the search box — for a tab that is a reference you look things up in rather than a stop in the reading order (e.g. an API reference). Honored only by the `tabs` appearance, and there only for `"right"` — the union matches WebEditorHeader , which intersects this type and already carries both values. The item keeps everything a centered tab has, including `dropdownMenu` and route-prefix active highlighting.

Nested navigation items — recursive. Honored ONLY by sidebar-dropdown surfaces ( `navigation.sidebarDropdown` and `appearance: "sidebarDropdown"` segments): an entry with `pages` (typically without `page` / `href` ) renders as an inline-expandable GROUP row inside the dropdown popover — clicking it expands its children (indented) within the same popover. `title` , `icon` , and `description` apply to the group row. Other appearances (tabs, logoTrailing) ignore nesting.

How the `dropdownMenu` opens. Defaults to `"hover"` .

The navigation item title

The navigation item description

The navigation page, if set it redirects to the page + matches based on routing

The navigation href, if set it redirects but does not match based on routing

The navigation item icon

Accent color (any CSS color) for this item. Used by `logoTrailing` product switchers and accent-aware themes (e.g. `terrarium` ) to recolor the UI per product — the active item's `color` is applied as `--theme-color-primary` .

Nested navigation rendered as a dropdown menu under this item. Recursive — a child may itself declare `dropdownMenu` to create submenus (e.g. `api → [Browser SDK, REST API, GraphQL]` ). Supported on header anchors and tabs. Accepts a plain item array, or the object form DropdownMenu carrying menu-level options (e.g. `{ itemsPerColumn: 7, items: [...] }` ).

Render this item on the RIGHT of the header rather than with its siblings, before the search box — for a tab that is a reference you look things up in rather than a stop in the reading order (e.g. an API reference). Honored only by the `tabs` appearance, and there only for `"right"` — the union matches WebEditorHeader , which intersects this type and already carries both values. The item keeps everything a centered tab has, including `dropdownMenu` and route-prefix active highlighting.

Nested navigation items — recursive. Honored ONLY by sidebar-dropdown surfaces ( `navigation.sidebarDropdown` and `appearance: "sidebarDropdown"` segments): an entry with `pages` (typically without `page` / `href` ) renders as an inline-expandable GROUP row inside the dropdown popover — clicking it expands its children (indented) within the same popover. `title` , `icon` , and `description` apply to the group row. Other appearances (tabs, logoTrailing) ignore nesting.

How the `dropdownMenu` opens. Defaults to `"hover"` .

Route this segment is scoped to. When a **string**, the segment only shows under that route prefix (route-scoped). When **omitted or `false` **, the segment is GLOBAL — always visible (e.g. a top-level product switcher). The globalness comes from the absence of a route, NOT from the `appearance` .

Title of this segment

Appearance of this segment — a SegmentAppearance string, or the object form SegmentAppearanceConfig carrying kind-specific options (e.g. `{ kind: "sidebarDropdown", options: { fixed: true } }` ).

How a `logoTrailing` segment's dropdown opens. Defaults to `"hover"` .

`logoTrailing` only: render the trigger ICON-ONLY — show the active item's icon at a larger size and hide the trigger title label. Use when the icon is a full wordmark image (logo + product name) so a text label is redundant. Defaults to `false` .

`logoTrailing` only: a custom component rendered AS this segment's dropdown PANEL (e.g. a rich multi-column product mega-menu), instead of the default `pages` list. A path to a default-export React component (relative to the docs project), or `{ import, props }` . Resolved through the same user-components registry as sidebar `ComponentPage` components, so it may use `@xyd-js/framework/react` hooks; the framework also passes it the active item, the segment, and the resolved `items` .

Core interface for navigation items

Header anchors

Sidebar anchors

Source configuration

Route configuration

API information configuration

Preset-specific rendering options (e.g. CLI).

SDK-native reference docs (OpenAPI sources only). Generates per-language SDK types, method signatures, and usage samples at BUILD time via the OpenSDK toolchain, with the raw-HTTP (cURL) view kept as a first-class entry in the page-wide language switcher. `true` enables all languages; the object form restricts them. Ignored for graphql/cli/mcp sources.

Source configuration

Route configuration

API information configuration

Preset-specific rendering options (e.g. CLI).

SDK-native reference docs (OpenAPI sources only). Generates per-language SDK types, method signatures, and usage samples at BUILD time via the OpenSDK toolchain, with the raw-HTTP (cURL) view kept as a first-class entry in the page-wide language switcher. `true` enables all languages; the object form restricts them. Ignored for graphql/cli/mcp sources.

Source configuration

Route configuration

API information configuration

Preset-specific rendering options (e.g. CLI).

SDK-native reference docs (OpenAPI sources only). Generates per-language SDK types, method signatures, and usage samples at BUILD time via the OpenSDK toolchain, with the raw-HTTP (cURL) view kept as a first-class entry in the page-wide language switcher. `true` enables all languages; the object form restricts them. Ignored for graphql/cli/mcp sources.

MCP server URL (http/https/sse).

Sidebar route prefix to nest the generated pages under.

Per-source options.

Source configuration

Route configuration

API information configuration

Preset-specific rendering options (e.g. CLI).

SDK-native reference docs (OpenAPI sources only). Generates per-language SDK types, method signatures, and usage samples at BUILD time via the OpenSDK toolchain, with the raw-HTTP (cURL) view kept as a first-class entry in the page-wide language switcher. `true` enables all languages; the object form restricts them. Ignored for graphql/cli/mcp sources.

LiveSession's TrackID

Chatwoot website token

Chatwoot base URL

Chatwoot settings

Intercom app ID

Intercom API base

Livechat license ID

Algolia application ID

Algolia API key

GrowthBook configuration

LaunchDarkly configuration

Mermaid diagram configuration - `true` : Enable with default settings - `{ strategy: 'img-svg' }` : Enable with custom settings

Graphviz diagram configuration - `true` : Enable with default settings - `{ engine: 'neato' }` : Enable with custom settings

Detailed diagram config, useful for e.g setting diagram's interactive.

The title of the Github button

The label of the Github Button

The href of the Github project

The data-show-count of the Github project

The data-icon of the Github button

The data-size of the Github button

The aria-label of the Github button

The Supademo API key