Tabs

Switch between different views

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Components

Tab – utility component to pass data to Tabs component, does not render anything on its own. Do not use outside of Tabs component.
Tabs – receives data from Tab content and renders component

Usage

<Tabs>
  <Tab label="Gallery" icon={<ImageIcon />}>Gallery tab content</Tab>
  <Tab label="Messages" icon={<ChatBubbleIcon />}>Messages tab content</Tab>
  <Tab label="Settings" icon={<MixerVerticalIcon />}>Settings tab content</Tab>
</Tabs>

Controlled Tabs

Tabs state can be controlled, to implement this pass active and onTabChange props. You can also use onTabChange callback with uncontrolled Tabs.

import { useState } from 'react';
import { Tabs, Tab } from '@mantine/core';

function Demo() {
  const [activeTab, setActiveTab] = useState(1);

  return (
    <Tabs active={activeTab} onTabChange={setActiveTab}>
      <Tab label="First">First tab content</Tab>
      <Tab label="Second">Second tab content</Tab>
      <Tab label="Third">Third tab content</Tab>
    </Tabs>
  );
}

Tabs with icons

You can add any React node as icon by setting icon prop on Tab component. If icon prop is set, it is not necessary to pass label. You can use icons from any react icons library, for example:

radix icons (used in mantine packages)
feather
react-icons

Chat here

<Tabs>
  <Tab label="Chat" icon={<ChatBubbleIcon />}>Chat here</Tab>
  <Tab label="Settings" icon={<MixerHorizontalIcon />}>Settings</Tab>
  <Tab icon="$">Get money!</Tab>
</Tabs>

You can change color of individual tab by passing color property to Tab component, or change color of all tabs by passing color to Tabs component. Color that you pass to these components should be defined in theme.colors.

Color calculation prioritizes deeper values: first <Tab color="value" /> value will be used if defined, then <Tabs color="value">, after that value will be set to theme.primaryColor.

Teal tab content

<Tabs color="teal">
  <Tab label="Teal tab">Teal tab content</Tab>
  <Tab label="Still teal">Teal tab #2</Tab>
  <Tab label="Pink tab" color="pink">
    Pink tab content
  </Tab>
</Tabs>

Tabs position

Tabs controls position is controlled with grow and position props. If grow property is set to true, controls will take 100% of available space and position property is ignored.

First tab content

Grow

Position

Variant

Default

Outline

Pills

<Tabs>
  <Tab label="First">First tab content</Tab>
  <Tab label="Second">Second tab content</Tab>
  <Tab label="Third">Third tab content</Tab>
</Tabs>

Tab component props

In addition to icon and label props shown before, Tab component accepts color, disabled and any other props from regular button (e.g. style, title, aria-, data-). color prop will override color defined in Tabs component.

First tab content

<Tabs>
  <Tab label="First" title="Reveal hidden truth on long mouse over">
    First tab content
  </Tab>
  <Tab label="Not allowed" disabled>
    https://youtu.be/dQw4w9WgXcQ
  </Tab>
  <Tab label="Delete this?" color="red" style={{ fontWeight: 500 }}>
    Yes, delete this
  </Tab>
</Tabs>

Add your styles with styles API

You can change styles of any element in button component with Styles API to match your design requirements. To remove all default styles set variant prop to unstyled:

import { createStyles, Tabs, Tab } from '@mantine/core';

const useStyles = createStyles((theme) => ({
  tabControl: {
    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[9],
    border: `1px solid ${
      theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[4]
    }`,
    fontSize: theme.fontSizes.md,
    padding: [theme.spacing.lg, theme.spacing.xl],

    '& + &': {
      borderLeft: 0,
    },

    '&:first-of-type': {
      borderTopLeftRadius: theme.radius.md,
      borderBottomLeftRadius: theme.radius.md,
    },

    '&:last-of-type': {
      borderTopRightRadius: theme.radius.md,
      borderBottomRightRadius: theme.radius.md,
    },
  },

  tabActive: {
    backgroundColor: theme.colors.blue[7],
    borderColor: theme.colors.blue[7],
    color: theme.white,
  },
}));

function StyledTabs(props: TabsProps) {
  const classes = useStyles();
  return <Tabs variant="unstyled" classNames={classes} {...props} />;
}

function Demo() {
  return (
    <StyledTabs>
      <Tab label="Settings" icon={<GearIcon width={16} height={16} />} />
      <Tab label="Messages" icon={<ChatBubbleIcon width={16} height={16} />} />
      <Tab label="Gallery" icon={<ImageIcon width={16} height={16} />} />
    </StyledTabs>
  );
}

Get tab control ref

You can get tab control ref by passing elementRef prop to Tab component

import { useRef } from 'react';
import { Tabs, Tab } from '@mantine/core';

function TabsDemo() {
  const secondTabRef = useRef();

  return (
    <Tabs>
      <Tab label="First">First tab content</Tab>
      <Tab label="Second" elementRef={secondTabRef}>
        Second tab content
      </Tab>
      <Tab label="Third">Third tab content</Tab>
    </Tabs>
  );
}

Accessibility and usability

Tabs component follows WAI-ARIA recommendations on accessibility. Component fully supports keyboard events handling and has correct aria-roles:

Use right and left arrow keys to change tabs when orientation is horizontal
Use down and up arrow keys to change tabs when orientation is vertical
Only selected tab control can be focused
All elements have correct roles: tab, tablist and tabpanel
aria-orientation is set based off orientation prop (default is horizontal)

Build fully functional accessible web applications with ease

Project

Contribute to Mantine Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter Github discussions

Feedback

Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good

Leave feedback

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter