Tabs
Switches between related sections of content in the same context.
On this page
This docs is LLM-friendly and available as clean Markdown.
Supported browser agents can also use WebMCP to search, read, and open these docs. Learn more
Usage
import {
GlScrollableTabs,
GlTab,
GlTabActions,
GlTabs,
GlTabsAfter,
GlTabsBefore,
} from "gitlab-ui-react/tabs";<>
<GlTabs>
<GlTabsBefore>Before the tab list</GlTabsBefore>
<GlTab title="Overview">Overview content</GlTab>
<GlTab title="Activity">Activity content</GlTab>
<GlTabActions>Tab actions</GlTabActions>
<GlTabsAfter>After the tab list</GlTabsAfter>
</GlTabs>
<GlScrollableTabs>
<GlTab title="Scrollable tab">Scrollable content</GlTab>
</GlScrollableTabs>
</>Default
Use tabs for peer sections that users can switch between without leaving the current context. Each GlTab supplies both its title and panel content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Norcleeh and @NriotHrreion are members of this project.
import { GlTab, GlTabs } from "gitlab-ui-react/tabs";
export default function TabsExample() {
return (
<GlTabs>
<GlTab title="Overview">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</GlTab>
<GlTab title="Issues">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</GlTab>
<GlTab title="Members">
<p>Norcleeh and @NriotHrreion are members of this project.</p>
</GlTab>
</GlTabs>
);
}
Justified tabs
Use justified tabs when two or three short tabs should share the available width equally. Make sure they still fit horizontally without wrapping.
import { GlTab, GlTabs } from "gitlab-ui-react/tabs";
export default function TabsJustifiedExample() {
return (
<GlTabs justified>
<GlTab title="Overview">Overview panel</GlTab>
<GlTab title="Activity">Activity panel</GlTab>
<GlTab title="Members">Members panel</GlTab>
</GlTabs>
);
}
Counts and disabled tabs
Use tabCount for a compact quantity and tabCountSrText to give that number context. Disable a tab only when its content exists but is temporarily unavailable.
All issues
Open issues
Closed issues
import { GlTab, GlTabs } from "gitlab-ui-react/tabs";
export default function TabsCountsExample() {
return (
<GlTabs>
<GlTab tabCount={42} tabCountSrText="42 issues" title="All">
<p>All issues</p>
</GlTab>
<GlTab tabCount={15} tabCountSrText="15 open issues" title="Open">
<p>Open issues</p>
</GlTab>
<GlTab disabled title="Closed">
<p>Closed issues</p>
</GlTab>
</GlTabs>
);
}
Scrollable tabs
Use GlScrollableTabs when the tab list may exceed the available width. It adds overflow controls while retaining the same GlTab API.
Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content
Tab 5 content
Tab 6 content
Tab 7 content
Tab 8 content
Tab 9 content
Tab 10 content
Tab 11 content
Tab 12 content
Tab 13 content
Tab 14 content
Tab 15 content
Tab 16 content
Tab 17 content
Tab 18 content
import { GlScrollableTabs, GlTab } from "gitlab-ui-react/tabs";
const tabs = Array.from({ length: 18 }, (_, index) => `Tab ${index + 1}`);
export default function TabsScrollableExample() {
return (
<div className="max-w-xl">
<GlScrollableTabs>
{tabs.map((title) => (
<GlTab key={title} title={title}>
<p>{title} content</p>
</GlTab>
))}
</GlScrollableTabs>
</div>
);
}
Accessibility
- Use short, unique tab titles that describe their panels.
- The component manages tab, tablist, and tabpanel relationships as well as arrow-key, Home, and End navigation.
- When
tabCountis visible, providetabCountSrTextwith its context for screen readers. - Avoid tabs when users need to compare panels simultaneously or when sections have an important sequential order.
API
GlTabs
| Prop | Description | Default |
|---|---|---|
defaultValue |
Sets the initial selected tab index when uncontrolled. | 0 |
value |
Controls the selected tab index. | — |
onValueChange |
Reports selection changes. | — |
justified |
Gives every tab an equal share of the navigation width. | false |
lazy |
Mounts panels only while active. | false |
empty |
Renders content when there are no GlTab children. |
— |
syncActiveTabWithQueryParams |
Synchronizes the active tab with the URL query string. | false |
queryParamName |
Sets the query parameter used for synchronization. | "tab" |
contentClassName |
Adds classes to the panel container. | — |
navClassName |
Adds classes to the tab list. | — |
GlScrollableTabs
Accepts every GlTabs prop plus the following overflow-control labels.
| Prop | Description | Default |
|---|---|---|
scrollLeftLabel |
Labels the left overflow control. | "Scroll left" |
scrollRightLabel |
Labels the right overflow control. | "Scroll right" |
GlTabsBefore
Accepts children and supported div attributes for content before the tab list.
GlTabsAfter
Accepts children and supported div attributes for content after the tab list.
GlTabActions
Accepts children and supported div attributes for actions aligned with the tab list.
GlTab
| Prop | Description | Default |
|---|---|---|
title |
Sets the visible and accessible tab title. | Required |
children |
Supplies the tab panel content. | — |
disabled |
Prevents the tab from being selected. | false |
lazy |
Overrides the root lazy-mounting behavior for this panel. | Inherits root |
tabCount |
Adds a numeric badge after the title. | — |
tabCountSrText |
Adds screen-reader context for the count. | — |
queryParamValue |
Sets this tab’s URL value during query synchronization. | Index-derived |
tabProps |
Adds supported attributes to the tab button. | — |
titleClassName |
Adds classes to the tab button. | — |
titleItemClassName |
Adds classes to the tab list item. | — |
panelProps |
Adds supported attributes to the tab panel. | — |
panelClassName |
Adds classes to the tab panel. | — |