Tabs

Use tabs to organize related but unique content for a single idea or subject. Tabs show and hide content using in-page navigation UI.

EuiTabs is a wrapping component that requires EuiTab components as direct children. You control the displayed contents and current state through props on EuiTab like

isSelected and onClick.

Use the prepend and append tab props to add content before and after the tab label respectively.

Component

Usage

Tab sizes

EuiTabs allow a size prop. In general you should always use the default (medium) size. The small size is best for when placing inside popovers or other small containers. Reserve using the large size for when using as primary page navigation, like inside of

EuiPageHeader.

You can also use the expand prop to evenly stretch each tab horizontally.

Bottom border

The bottomBorder helps to separate the tab group from the content below and is on by default. However, some components like flyouts already provide borders which can act as the divider. In this case you can turn the border off with bottomBorder={false}.

Tabbed content

EuiTabbedContent makes it easier to associate tabs with content based on the selected tab. Use the initialSelectedTab prop to specify which tab to initially select.

Controlled tabbed content

You can also use the selectedTab and onTabClick props to take complete control over tab selection. This can be useful if you want to change tabs based on user interaction with another part of the UI.

Guidelines

Use tabs to organize in-page content

Each tab should contain a segment of information relevant to the current subject. For more UX tips see NNG's article "Tabs, Used Right".

Tabs should keep users on the same page, visually, and not change the higher-level navigation, logically. Tabs should keep users at the same place within an application. Breadcrumbs and main navigation should not change. The URL hash is the only thing that should change.

Sync the `selectedTab` with the URL

Ensure when a page is loaded with a URL hash representing a selected tab (as applied by the href prop), that the corresponding tab is shown using the selectedTab prop.

Use `href` for primary page content

For tabs showing primary page content, use the href prop to change the current URL hash. Ensure the tab selection is persisted in the user's navigation history and works with the browser's back button.

Do not update the URL when multiple `EuiTabs` are in use on the same page

Apply the href prop to change the current page URL hash on more than one set of tabs per page, or non-primary content.

Props

EuiTabs

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop children#	Description and type ReactNode to render as this component's content Type: `ReactNode`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop expand#	Description and type Evenly stretches each tab to fill the horizontal space Type: `boolean`	Default value `false`
Prop bottomBorder#	Description and type Adds a bottom border to separate it from the content after Type: `boolean`	Default value `true`
Prop size#	Description and type Sizes affect both font size and overall size. Only use the `xl` size when displayed as page titles. Type: `"s" \| "m" \| "l" \| "xl"`	Default value `m`
Prop ref#	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: `LegacyRef<HTMLDivElement>`	Default value

EuiTab

Extends AnchorHTMLAttributes, ButtonHTMLAttributes


Prop	Description and type	Default value
Prop href#	Description and type Type: `string`	Default value
Prop isSelected#	Description and type Type: `boolean`	Default value
Prop disabled#	Description and type Type: `boolean`	Default value
Prop prepend#	Description and type Places content before the tab content/children. Will be excluded from interactive effects. Type: `ReactNode`	Default value
Prop append#	Description and type Places content after the tab content/children. Will be excluded from interactive effects. Type: `ReactNode`	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop onClick#	Description and type Type: `MouseEventHandler<HTMLAnchorElement> \| MouseEventHandler<HTMLButtonElement>`	Default value

EuiTabbedContent