## Tabs Use the Tab and Tabs component to switch between views. Category: Navigation ### Usage ```python import dash_mantine_components as dmc dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab("Gallery", value="gallery"), dmc.TabsTab("Messages", value="messages"), dmc.TabsTab("Settings", value="settings"), ] ), dmc.TabsPanel("Gallery tab content", value="gallery"), dmc.TabsPanel("Messages tab content", value="messages"), dmc.TabsPanel("Settings tab content", value="settings"), ], color="red", # default is blue orientation="horizontal", # or "vertical" variant="default", # or "outline" or "pills" value="gallery" ) ``` ### Variants Use the `variant` can be set to `"default"`, `"outline"` or `"pills"` ### Change colors To change colors of all tabs, set `color` on `Tabs` component, to change color of the individual tab, set `color` on `TabsTab`. ```python import dash_mantine_components as dmc component = dmc.Tabs( color="teal", value="first", children=[ dmc.TabsList( children=[ dmc.TabsTab("Teal tab", value="first"), dmc.TabsTab("Blue tab", value="second", color="blue"), ] ), dmc.TabsPanel( "First tab color is teal, it gets this value from context", value="first", pt="xs", ), dmc.TabsPanel( "Second tab color is blue, it gets this value from props, props have the priority and will override context value", value="second", pt="xs", ), ], ) ``` ### Icons on right or left You can use any dash component as icon and rightSection in dmc.TabsTab component. ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab( "Gallery", leftSection=DashIconify(icon="tabler:photo"), value="gallery", ), dmc.TabsTab( "Messages", leftSection=DashIconify(icon="tabler:message"), value="messages", ), dmc.TabsTab( "Settings", leftSection=DashIconify(icon="tabler:settings"), value="settings", ), ] ), ], value="messages", ) ``` ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab( "Messages", rightSection=dmc.Badge( "6", size="xs", p=0, variant="filled", circle=True ), value="messages", ), dmc.TabsTab( "Settings", rightSection=DashIconify(icon="tabler:alert-circle", width=16), value="settings", ), ] ), ], value="messages", ) ``` ### Tabs Position `Tabs` controls position is controlled with `grow` and `justify` properties in `TabsList` component. If `grow` property is set to `True`, controls will take 100% of available space and `justify` property is ignored. ```python import dash_mantine_components as dmc dmc.Tabs( children=[ dmc.TabsList( justify="right", grow=False, children=[...], ) # tabs panel below ] ) ``` ### Separated Tabs To display tab on the opposite side, set `margin-left` to auto with `ml="auto"` in `TabsTab` component. ```python import dash_mantine_components as dmc component = dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab("Gallery", value="gallery"), dmc.TabsTab("Messages", value="messages"), dmc.TabsTab("Settings", value="settings", ml="auto"), ] ), ], value="gallery", ) ``` ### Inverted Tabs To make tabs inverted, place `TabsPanel` components before `TabsList` and add `inverted=True` prop to `Tabs` component. ```python import dash_mantine_components as dmc component = dmc.Tabs( [ dmc.TabsPanel("Gallery tab content", value="gallery", pb="xs"), dmc.TabsPanel("Messages tab content", value="messages", pb="xs"), dmc.TabsPanel("Settings tab content", value="settings", pb="xs"), dmc.TabsList( [ dmc.TabsTab("Gallery", value="gallery"), dmc.TabsTab("Messages", value="messages"), dmc.TabsTab("Settings", value="settings", ml="auto"), ] ), ], value="gallery", inverted=True, ) ``` ### Vertical Tabs placement To change placement of `TabsList` in vertical orientation, set `placement` prop in `Tabs`. ### Disabled tabs Set `disabled=True` prop on `TabsTab` component to disable tab. Disabled tab cannot be activated with mouse or keyboard, and they will be skipped when user navigates with arrow keys: ```python import dash_mantine_components as dmc component = dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab("Gallery", value="gallery"), dmc.TabsTab("Messages", value="messages", disabled=True), dmc.TabsTab("Settings", value="settings"), ] ), dmc.TabsPanel("Gallery tab content", value="gallery"), dmc.TabsPanel("Messages tab content", value="messages"), dmc.TabsPanel("Settings tab content", value="settings"), ], value="gallery" ) ``` ### Activation mode By default, tabs are activated when user presses arrows keys or Home/End keys. To disable that set `activateTabWithKeyboard=False` on `Tabs` component. This can be useful if the tab content is updated in a long running callback. Try clicking on a tab to focus, then navigate to other tabs with arrow keys, or home/end keys: ```python import dash_mantine_components as dmc dmc.Tabs( activateTabWithKeyboard=False, children=[ # tabs content ], ) ``` ### Tab deactivation By default, active tab cannot be deactivated. To allow that set `allowTabDeactivation=True` on Tabs component: Try clicking on the active tab to see the deactivated state: ### Content As Callback Attach a callback to the Tabs `value` prop and update a container's `children` property in your callback. ```python import dash_mantine_components as dmc from dash import Input, Output, html, callback from lib.utils import create_graph component = html.Div( [ dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab("Tab one", value="1"), dmc.TabsTab("Tab two", value="2"), ] ), ], id="tabs-example", value="1", ), html.Div(id="tabs-content", style={"paddingTop": 10}), ] ) @callback(Output("tabs-content", "children"), Input("tabs-example", "value")) def render_content(active): if active == "1": return [dmc.Text("Tab One selected", my=10), create_graph()] else: return [dmc.Text("Tab Two selected", my=10), create_graph()] ``` ### Content As Tab Children Instead of displaying the content through a callback, you can embed the content directly as the `children` property in the Tab component. ```python import dash_mantine_components as dmc from lib.utils import create_graph component = dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab("Tab one", value="1"), dmc.TabsTab("Tab two", value="2"), dmc.TabsTab("Tab three", value="3"), ] ), dmc.TabsPanel(create_graph(), value="1"), dmc.TabsPanel(create_graph(), value="2"), dmc.TabsPanel(create_graph(), value="3"), ], value="1", ) ``` ### Styling the Tabs #### With Props This example demonstrates how to style tabs using only props, without requiring additional CSS files: - **Variant**: Sets `variant="pills"` to make the tabs resemble buttons. - **Grow Prop**: Uses the `grow` prop on the `TabsList` component, causing the tabs to expand and fill the full width of the viewport. - **Border**: Adds a border around the tabs with the `bd` prop. For more details, see the [Style Props](/style-props) section. - **Border Color**: Sets the border color using the Mantine CSS variable `var(--mantine-color-default-border)`, ensuring a border color that works well in both light and dark modes. See the [Colors](/colors) section for more details. - **Active Tab Color**: Sets the active tab color with `color="green.3"`. This specifies a lighter shade of a built-in color. Mantine’s color palette includes 10 shades for each color, indexed from 0 (lightest) to 9 (darkest). Learn more in the [Colors](/colors) section. - **Auto Contrast**: Enables `autoContrast=True` to automatically adjust the text color for better readability when using lighter or darker background colors. Additional details can be found in the [Colors](/colors) section. ```python import dash_mantine_components as dmc component = dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab("Gallery", value="gallery"), dmc.TabsTab("Messages", value="messages"), dmc.TabsTab("Settings", value="settings"), ], grow=True, bd="1px solid var(--mantine-color-default-border)" ), dmc.TabsPanel("Gallery tab content", value="gallery"), dmc.TabsPanel("Messages tab content", value="messages"), dmc.TabsPanel("Settings tab content", value="settings"), ], color="green.3", autoContrast=True, variant="pills", value="gallery", ) ``` #### With Styles API This example demonstrates styling tabs using the Styles API, allowing for precise control over the appearance of each element in the tabs component. For more information, see the Styles API section below. ```python import dash_mantine_components as dmc component = dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab("Gallery", value="gallery"), dmc.TabsTab("Messages", value="messages"), dmc.TabsTab("Settings", value="settings"), ], grow=True ), dmc.TabsPanel("Gallery tab content", value="gallery"), dmc.TabsPanel("Messages tab content", value="messages"), dmc.TabsPanel("Settings tab content", value="settings"), ], value="gallery", classNames={"tab": "dmc-tabs"} ) ``` Put the following in a `.css` file in the `/assets` folder ```css .dmc-tabs { position: relative; border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4)); background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6)); &:first-of-type { border-radius: 4px 0 0 4px; } &:last-of-type { border-radius: 0 4px 4px 0; } & + & { border-left-width: 0; } &:hover { background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5)); } &[data-active] { z-index: 1; background-color: var(--mantine-color-blue-filled); border-color: var(--mantine-color-blue-filled); color: var(--mantine-color-white); &:hover { background-color: var(--mantine-color-blue-filled-hover); } } } ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. Refer to the Mantine Tabs Style API [interactive demo](https://mantine.dev/core/tabs/#styles-api) for help in identifying each selector. #### Tabs Selectors | Selector | Static selector | Description | |--------------|------------------------------|------------------------------------------| | root | .mantine-Tabs-root | Root element (Tabs component) | | list | .mantine-Tabs-list | List of tabs (Tabs.List component) | | panel | .mantine-Tabs-panel | Panel with tab content (Tabs.Panel component) | | tab | .mantine-Tabs-tab | Tab button (Tabs.Tab component) | | tabLabel | .mantine-Tabs-tabLabel | Label of Tabs.Tab | | tabSection | .mantine-Tabs-tabSection | Left and right sections of Tabs.Tab | #### Tabs CSS Variables | Selector | Variable | Description | |----------|-----------------|--------------------------------------------------------------| | root | --tabs-color | Controls colors of Tabs.Tab, only applicable for `pills` or `default` variant | | | --tabs-radius | Controls Tabs.Tab border-radius | #### Tabs Data Attributes | Selector | Attribute | Condition | Value | |-------------------|--------------------|-------------------------------------------|------------------------------| | root, tab, list, panel | data-orientation | – | Value of `orientation` prop | | root, tab, list | data-placement | `orientation` is "vertical" on Tabs component | Value of `placement` prop | | tab, list | data-inverted | `inverted` prop is set on Tabs component | – | | list | data-grow | `grow` prop is set on Tabs.List component | – | | tabSection | data-position | – | Position of the section (left or right) | ### Keyword Arguments #### Tabs - children (a list of or a singular dash component, string or number; required): Tabs content. - id (string; optional): Base id, used to generate ids to connect labels with controls, generated randomly by default. - activateTabWithKeyboard (boolean; optional): Determines whether tab should be activated with arrow key press, `True` by default. - allowTabDeactivation (boolean; optional): Determines whether tab can be deactivated, `False` by default. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - autoContrast (boolean; optional): Determines whether active item text color should depend on `background-color` of the indicator. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. Only applicable when `variant="pills"`. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Changes colors of `Tabs.Tab` components when variant is `pills` or `default`, does nothing for other variants. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - inverted (boolean; optional): Determines whether tabs should have inverted styles, `False` by default. - keepMounted (boolean; optional): If set to `False`, `Tabs.Panel` content will be unmounted when the associated tab is not active, `True` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - loop (boolean; optional): Determines whether arrow key presses should loop though items (first to last and last to first), `True` by default. - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - orientation (a value equal to: 'vertical', 'horizontal'; optional): Tabs orientation, `'horizontal'` by default. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - placement (a value equal to: 'left', 'right'; optional): `Tabs.List` placement relative to `Tabs.Panel`, applicable only when `orientation="vertical"`, `'left'` by default. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - value (string; optional): Value for controlled component. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. #### TabsList - children (a list of or a singular dash component, string or number; required): `Tabs.Tab` components. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - grow (boolean; optional): Determines whether tabs should take all available space, `False` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - justify (optional): Tabs alignment, `flex-start` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. #### TabsPanel - children (a list of or a singular dash component, string or number; required): Panel content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - keepMounted (boolean; optional): If set to `True`, the content will be kept mounted, even if `keepMounted` is set `False` in the parent `Tabs` component. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - value (string; required): Value of associated control. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. #### Tab - children (a list of or a singular dash component, string or number; optional): Tab label. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors` or any valid CSS color, controls control color based on `variant`. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - disabled (boolean; optional): Indicates disabled state. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - leftSection (a list of or a singular dash component, string or number; optional): Content displayed on the left side of the label, for example, icon. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - rightSection (a list of or a singular dash component, string or number; optional): Content displayed on the right side of the label, for example, icon. - size (string | number; optional): Size passed from parent component. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - value (string; required): Value of associated panel. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`.