Tabs

Source

<script setup lang="ts">
import MtTabs from "@shopware-ag/meteor-component-library/MtTabs";

const items = [
  { label: "Overview", name: "overview" },
  { label: "Orders", name: "orders" },
  { label: "Customers", name: "customers" },
];
</script>

<template>
  <mt-tabs :items="items" default-item="overview" />
</template>

Usage

Tabs let users move between peer sections of content when only one panel or view should be active at a time. Use them for compact navigation inside a page, card, or workspace area.

import { MtTabs } from "@shopware-ag/meteor-component-library";

Examples

Vertical

Lay the tabs out as a vertical list for side navigation within a section.

<script setup lang="ts">
import MtTabs from "@shopware-ag/meteor-component-library/MtTabs";

const items = [
  { label: "Overview", name: "overview" },
  { label: "Orders", name: "orders" },
  { label: "Customers", name: "customers" },
  { label: "Settings", name: "settings" },
];
</script>

<template>
  <mt-tabs :items="items" default-item="orders" vertical />
</template>

API reference

Props

Prop	Type	Default
`items` *	`TabItem[]`
`small`	`boolean`	`false`
`vertical`	`boolean`	`false`
`default-item`	`string`	`""`

Events

Event	Payload
`new-item-active`	`any[]`

Exposed

Name	Type
`tabClasses`	`(string \| { "mt-tabs--vertical": boolean; "mt-tabs--small": boolean; "mt-tabs--future-remove-default-margin": any; })[]`
`refreshKey`	`boolean`
`activeItemName`	`string`
`showMoreItems`	`boolean`
`passedFirstRender`	`boolean`
`activeDomItem`	`any`
`sliderPosition`	`number`
`sliderLength`	`number`
`activeItem`	`TabItem`
`sliderClasses`	`Record<string, boolean>`
`sliderStyle`	`string`

Best practices

Use short, clear labels so users can scan the available sections quickly.
Keep the set of tabs related and at the same hierarchy level.
Use badges or error indicators only when the extra status helps users prioritize where to look.

Don't

Do not use Tabs for unrelated actions or mixed controls.
Do not overload tabs with long labels that make scanning difficult.
Do not use tabs when a vertical navigation, segmented control, or button group would express the structure more clearly.

Behavior

Tabs take their items from the items prop and emit new-item-active when the selection changes.
If there are too many horizontal tabs to fit, extra items move into a More menu automatically.
vertical changes the layout direction, and small provides a more compact presentation.
small is marked as deprecated in the component and should be treated as a legacy option.

Accessibility

Use labels that make sense as standalone tab names.
Keep the order stable so keyboard and screen-reader users can build a reliable mental model.
Make sure the currently active tab corresponds to clearly updated content nearby.

Segmented Control: when its current experimental grouped-action behavior is needed, not as a general replacement for tab navigation.
Button: when the user should trigger an action instead of navigating between peer sections.

Edit this pageorReport an issue

Switch

A direct on or off control for a single binary setting that takes effect immediately.

Text

The base typography component for body copy, headings, and supporting text.