Inverted tabs layout
To make tabs inverted, place Tabs.Panel components before Tabs.List and add the `inverted` prop to the Tabs component.
tabs/props
25 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Vertical tabs placement prop
To change the placement of Tabs.List in vertical orientation, set the `placement` prop on the Tabs component.
Position individual tabs with ml prop
To display a tab on the opposite side (right side), set `margin-left: auto` using the `ml="auto"` prop on Tabs.Tab or use className.
Controlled Tabs with value and onChange
To control the Tabs state, use the `value` prop to set the active tab and the `onChange` prop to handle tab changes. The value should be a string or null. Example: `<Tabs value={activeTab} onChange={setActiveTab}>`.
Uncontrolled Tabs with defaultValue
To create an uncontrolled Tabs component without subscribing to state changes, use the `defaultValue` prop to set the initial active tab. Example: `<Tabs defaultValue="first">`.
Change tab colors with color prop
To change the colors of all tabs, set the `color` prop on the Tabs component. To change the color of an individual tab, set the `color` prop on the Tabs.Tab component.
Disable individual tabs
Set the `disabled` prop on the Tabs.Tab component to disable a tab. Disabled tabs cannot be activated with the mouse or keyboard, and they will be skipped when the user navigates with arrow keys.
Disable keyboard activation of tabs
Set `activateTabWithKeyboard={false}` on the Tabs component to disable tab activation when the user presses arrow keys or Home/End keys. By default, tabs are activated with keyboard navigation.
Allow tab deactivation
Set `allowTabDeactivation` on the Tabs component to allow the active tab to be deactivated. By default, the active tab cannot be deactivated.
Unmount inactive panels with keepMounted
By default, inactive Tabs.Panel components stay mounted. Set `keepMounted={false}` on Tabs to unmount inactive panels. This is useful for performance-impacting components inside Tabs.Panel. Note that components will reset their state on each mount (tab change).
Get ref to Tabs.Tab element
Use the `ref` prop on Tabs.Tab to get a reference to the underlying HTMLButtonElement. Example: `<Tabs.Tab value="second" ref={secondTabRef}>`.
Render Tabs.Tab as link with renderRoot
Use the `renderRoot` prop on Tabs.Tab to render it as a custom element like an `<a>` tag. This prop accepts a function that receives props and returns a JSX element. Example: `<Tabs.Tab value="home" renderRoot={(props) => <a href="/home" {...props} />}>`.
Render Tabs.Tab as link with component prop
Use the `component` prop on Tabs.Tab to render it as a different element type. Example: `<Tabs.Tab value="home" component="a" href="/home">`.
Tabs.Tab as Next.js Link with renderRoot
To render Tabs.Tab as a Next.js Link component, use the `renderRoot` prop instead of the `component` prop because Next.js Link is a generic component. Example: `<Tabs.Tab value="/home" renderRoot={(props) => <Link href="/home" {...props} />}`.
Tabs.Tab as React Router Link with renderRoot
To render Tabs.Tab as a React Router Link or NavLink component, use the `renderRoot` prop. Example: `<Tabs.Tab value="/tabs/first" renderRoot={(props) => <Link to="/tabs/first" {...props} />}`.
Controlled Tabs component example
```tsx import { useState } from 'react'; import { Tabs } from '@mantine/core'; function Demo() { const [activeTab, setActiveTab] = useState<string | null>('first'); return ( <Tabs value={activeTab} onChange={setActiveTab}> <Tabs.List> <Tabs.Tab value="first">First tab</Tabs.Tab> <Tabs.Tab value="second">Second tab</Tabs.Tab> </Tabs.List> <Tabs.Panel value="first">First panel</Tabs.Panel> <Tabs.Panel value="second">Second panel</Tabs.Panel> </Tabs> ); } ``` This example shows how to create controlled Tabs using value and onChange props.
Uncontrolled Tabs component example
```tsx import { Tabs } from '@mantine/core'; function Demo() { return ( <Tabs defaultValue="first"> <Tabs.List> <Tabs.Tab value="first">First tab</Tabs.Tab> <Tabs.Tab value="second">Second tab</Tabs.Tab> </Tabs.List> <Tabs.Panel value="first">First panel</Tabs.Panel> <Tabs.Panel value="second">Second panel</Tabs.Panel> </Tabs> ); } ``` This example shows how to create uncontrolled Tabs using defaultValue.
Unmount inactive tabs example
```tsx import { Tabs } from '@mantine/core'; function Demo() { return ( <Tabs keepMounted={false} defaultValue="first"> <Tabs.List> <Tabs.Tab value="first">First tab</Tabs.Tab> <Tabs.Tab value="second">Second tab</Tabs.Tab> </Tabs.List> <Tabs.Panel value="first">First panel</Tabs.Panel> <Tabs.Panel value="second">Second panel</Tabs.Panel> </Tabs> ); } ``` This example shows how to unmount inactive Tabs.Panel components when keepMounted={false}. The second tab panel will be mounted only when the user activates the second tab.
Get tab control ref example
```tsx import { useRef } from 'react'; import { Tabs } from '@mantine/core'; function Demo() { const secondTabRef = useRef<HTMLButtonElement>(null); return ( <Tabs defaultValue="first"> <Tabs.List> <Tabs.Tab value="first">First tab</Tabs.Tab> <Tabs.Tab value="Second" ref={secondTabRef}> Second tab </Tabs.Tab> <Tabs.Tab value="third">Third tab</Tabs.Tab> </Tabs.List> </Tabs> ); } ``` This example shows how to get a reference to a Tabs.Tab element using useRef.
Tab as link with renderRoot example
```tsx import { Tabs } from '@mantine/core'; function Demo() { return ( <Tabs defaultValue="home"> <Tabs.List> <Tabs.Tab value="home" renderRoot={(props) => <a href="/home" {...props} />} > Home </Tabs.Tab> <Tabs.Tab value="about" renderRoot={(props) => <a href="/about" {...props} />} > About </Tabs.Tab> <Tabs.Tab value="contacts" renderRoot={(props) => <a href="/contacts" {...props} />} > Contacts </Tabs.Tab> </Tabs.List> </Tabs> ); } ``` This example shows how to render Tabs.Tab as anchor elements using the renderRoot prop to provide native link behavior.
Tab as link with component prop example
```tsx import { Tabs } from '@mantine/core'; function Demo() { return ( <Tabs defaultValue="home"> <Tabs.List> <Tabs.Tab value="home" component="a" href="/home"> Home </Tabs.Tab> <Tabs.Tab value="about" component="a" href="/about"> About </Tabs.Tab> </Tabs.List> </Tabs> ); } ``` This example shows how to render Tabs.Tab as anchor elements using the component prop.
Tab as Next.js Link example
```tsx import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { Tabs } from '@mantine/core'; function Demo() { const pathname = usePathname(); return ( <Tabs value={pathname}> <Tabs.List> <Tabs.Tab value="/home" renderRoot={(props) => <Link href="/home" {...props} />} > Home </Tabs.Tab> <Tabs.Tab value="/about" renderRoot={(props) => <Link href="/about" {...props} />} > About </Tabs.Tab> </Tabs.List> </Tabs> ); } ``` This example shows how to render Tabs.Tab as Next.js Link components using the renderRoot prop.
Tab as React Router Link example
```tsx import { Link, Route, useLocation, } from 'react-router-dom'; import { Tabs } from '@mantine/core'; // Route: <Route path="/tabs/:tabValue" element={<Demo />} /> function Demo() { const location = useLocation(); return ( <Tabs value={location.pathname}> <Tabs.List> <Tabs.Tab value="/tabs/first" renderRoot={(props) => ( <Link to="/tabs/first" {...props} /> )} > First tab </Tabs.Tab> <Tabs.Tab value="/tabs/second" renderRoot={(props) => ( <Link to="/tabs/second" {...props} /> )} > Second tab </Tabs.Tab> </Tabs.List> </Tabs> ); } ``` This example shows how to render Tabs.Tab as React Router Link components using the renderRoot prop.
Tabs with react-router useNavigate example
```tsx import { useNavigate, useParams } from 'react-router-dom'; import { Tabs } from '@mantine/core'; function Demo() { const navigate = useNavigate(); const { tabValue } = useParams(); return ( <Tabs value={tabValue} onChange={(value) => navigate(`/tabs/${value}`)} > <Tabs.List> <Tabs.Tab value="first">First tab</Tabs.Tab> <Tabs.Tab value="second">Second tab</Tabs.Tab> </Tabs.List> </Tabs> ); } ``` This example shows how to use Tabs with react-router using useNavigate and useParams hooks. The route should be defined as: `<Route path="/tabs/:tabValue" element={<Demo />} />`.
Tabs with Next.js App Router example
```tsx 'use client'; import { usePathname, useRouter } from 'next/navigation'; import { Tabs } from '@mantine/core'; function Demo() { const router = useRouter(); const pathname = usePathname(); const activeTab = pathname.split('/').pop(); return ( <Tabs value={activeTab} onChange={(value) => router.push(`/tabs/${value}`)} > <Tabs.List> <Tabs.Tab value="first">First tab</Tabs.Tab> <Tabs.Tab value="second">Second tab</Tabs.Tab> </Tabs.List> </Tabs> ); } ``` This example shows how to use Tabs with Next.js App Router. The component should be in a file like /tabs/[activeTab]/page.tsx and must have the 'use client' directive at the top. Use usePathname and useRouter hooks from next/navigation.