{
  "id": "uilib/components/tabs",
  "name": "Tabs",
  "description": "Tabs are a set of buttons which allow navigation between content that is related and on the same level of hierarchy.",
  "group": "components",
  "slug": "/uilib/components/tabs/",
  "props": [
    {
      "name": "selected_key",
      "doc": "In case one of the tabs should be opened by a `key`.",
      "type": [
        "string",
        "number"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "align",
      "doc": "To align the tab list on the right side `align=\"right\"`. Defaults to `left`.",
      "type": [
        "left",
        "center",
        "right"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "content_style",
      "doc": "To enable the visual helper `.dnb-section` on to the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.",
      "type": [
        "divider",
        "white",
        "transparent"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "content_spacing",
      "doc": "To modify the `spacing` onto the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `large`.",
      "type": [
        "boolean",
        "x-small",
        "small",
        "medium",
        "large",
        "x-large",
        "xx-large"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "tabs_style",
      "doc": "To enable the visual helper `.dnb-section` inside the tabs list. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.",
      "type": [
        "divider",
        "white",
        "transparent"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "tabs_spacing",
      "doc": "To modify the `spacing` inside the tab list. Defaults to `null`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "tab_element",
      "doc": "Define what HTML element should be used. You can provide e.g. `tab_element={GatsbyLink}` – you may then provide the `to` property inside every entry (`data={[{ to: ';url';, ... }]}`). Defaults to `<button>`.",
      "type": "React.ReactNode",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "children",
      "doc": "the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.",
      "type": [
        "React.ReactNode",
        "object"
      ],
      "status": "required",
      "defaultValue": null
    },
    {
      "name": "content",
      "doc": "the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.",
      "type": [
        "React.ReactNode",
        "object"
      ],
      "status": "required",
      "defaultValue": null
    },
    {
      "name": "prerender",
      "doc": "If set to `true`, the Tabs content will pre-render all contents. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "prevent_rerender",
      "doc": "If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `prerender`, but in contrast, the content will render once the user is activating a tab. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "scroll",
      "doc": "If set to `true`, the content will scroll on tab change, until all tabs will be visible on the upper side of the browser window view. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "no_border",
      "doc": "If set to `true`, the default horizontal border line under the tablist will be removed. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "nav_button_edge",
      "doc": "If set to `true`, the navigation icons will have a straight border at their outside. This feature is meant to be used when the Tabs component goes all the way to the browser window. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "skeleton",
      "doc": "If set to `true`, an overlaying skeleton with animation will be shown.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "breakout",
      "doc": "If set to `false`, the default horizontal border line under the tablist remains inside the parent boundaries. Defaults to `true`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "events": [
    {
      "name": "on_change",
      "doc": "(preferred) this event gets triggered once the tab changes its selected key. Returns `{ key, selected_key, focus_key, event }`.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "on_click",
      "doc": "This event gets triggered once the tab gets clicked. Returns `{ key, selected_key, focus_key, event }`.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "on_focus",
      "doc": "This event gets triggered once the tab changes its focus key. Returns `{ key, selected_key, focus_key, event }`.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "on_mouse_enter",
      "doc": "This event gets triggered once the user';s mouse enters a tab (hover). Returns `{ key, selected_key, focus_key, event }`.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "related": [
    "Space",
    "data"
  ],
  "checksum": "55f69e51fe7a92dc1c1b2c1cddd986fe9fb1dfce1d4db17c00e396b735469edd",
  "source": {
    "repo": "https://github.com/dnbexperience/eufemia",
    "file": "packages/dnb-eufemia/src/components/tabs/Tabs.tsx",
    "permalink": "https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/components/tabs/Tabs.tsx"
  },
  "sources": {
    "entry": {
      "local": "src/docs/uilib/components/tabs.mdx",
      "public": "https://d3bdcd79.eufemia-e25.pages.dev/uilib/components/tabs/"
    },
    "props": {
      "local": "src/docs/uilib/components/tabs/properties.mdx",
      "public": "https://d3bdcd79.eufemia-e25.pages.dev/uilib/components/tabs/properties/"
    },
    "events": {
      "local": "src/docs/uilib/components/tabs/events.mdx",
      "public": "https://d3bdcd79.eufemia-e25.pages.dev/uilib/components/tabs/events/"
    },
    "demos": {
      "local": "src/docs/uilib/components/tabs/demos.mdx",
      "public": "https://d3bdcd79.eufemia-e25.pages.dev/uilib/components/tabs/demos/"
    }
  },
  "version": "0.0.0-development",
  "generatedAt": "2025-12-18T09:47:41.168Z",
  "schemaVersion": 1
}