# Tabs

The Moxi Design System implements tabs as an mx-tabs component with a tabs prop that accepts an array of objects to configure each tab. The selected tab index is specified using the value prop. The mx-tabs component also emits a custom mxChange event, which contains the newly selected tab index in the Event.detail property.

By default, the mx-tabs component will render as an mx-select when the screen width is less than or equal to 768 px and there are more than two tabs.

<section class="mds">
  <!-- 
  The :tabs.prop syntax below is specific to Vue for passing data to DOM properties.
  If using JSX, you can set the tabs prop using the typical tabs={[...]} syntax.
  For vanilla JS, you will need to assign HTMLMxTabsElement.tabs = [...] in your script.
  -->
  <div class="my-20 space-y-20">
    <mx-tabs
      :tabs.prop="[
        { label: 'Home' },
        { label: 'Favorites', badge: true, badgeClass: 'text-green-600' },
        { label: 'Search' },
      ]"
      :value="activeTab"
      @mxChange="e => activeTab = e.detail"
    />
  </div>
</section>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Tab Content

Content can be automatically hidden or shown based on the selected tab using the mx-tab-content component. The mx-tabs component and each mx-tab-content must be passed the same variable for the value prop (a variable containing the active tab index), and each mx-tab-content must be given an index number that corresponds to its tab.

This is the Home tab.

This is the Favorites tab.

This is the Search tab.

<section class="mds">
  <div class="my-20 px-20 border">
    <mx-tabs
      :tabs.prop="[
        { label: 'Home' },
        { label: 'Favorites' },
        { label: 'Search' },
      ]"
      :value="activeTab"
      @mxChange="e => activeTab = e.detail"
    />
    <mx-tab-content :value="activeTab" index="0">
      <p>This is the Home tab.</p>
    </mx-tab-content>
    <mx-tab-content :value="activeTab" index="1">
      <p>This is the Favorites tab.</p>
    </mx-tab-content>
    <mx-tab-content :value="activeTab" index="2">
      <p>This is the Search tab.</p>
    </mx-tab-content>
  </div>
</section>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Tabs as Links

The mx-tabs component can be used as links for page navigation. Instead of passing a value prop to the mx-tabs component, set the href and selected props on each mx-tab. Internally, the tabs will then render as <a> elements instead of <button role="tab">.

<nav class="my-20">
  <mx-tabs
    :tabs.prop="[
      { label: 'Link 1', href: '#tabs-as-links', selected: true },
      { label: 'Link 2', href: '#tabs-as-links' },
      { label: 'MoxiWorks', href: 'https://moxiworks.com', target: '_blank' },
    ]"
  />
</nav>

1
2
3
4
5
6
7
8

# Submenus

The mx-submenu component is a wrapper around mx-tabs that is used for subpage navigation. It has the same tabs and value props, and it also emits the same mxChange event.

If any tab does not fit within the component width, then all tabs are collapsed into a hamburger menu.

To provide custom markup for the hamburger menu, use the "menu" slot.

This menu uses custom markup

Subpage

Subpage 2

Section 2.1

Section 2.2

Subpage 3

<mx-submenu
  :tabs.prop="[
    { label: 'Subpage' },
    { label: 'Subpage 2' },
    { label: 'Subpage 3' },
  ]"
  :value="activeTab"
  @mxChange="e => activeTab = e.detail"
/>
<mx-submenu
  class="w-208"
  :tabs.prop="[
    { label: 'Subpage' },
    { label: 'Subpage 2' },
    { label: 'Subpage 3' },
  ]"
  :value="activeTab"
  @mxChange="e => activeTab = e.detail"
/>
<mx-submenu
  class="w-208"
  :tabs.prop="[
    { label: 'Subpage' },
    { label: 'Subpage 2' },
    { label: 'Subpage 3' },
  ]"
  :value="activeTab"
  @mxChange="e => activeTab = e.detail"
>
  <mx-menu squared slot="menu">
    <p role="heading">This menu uses custom markup</p>
    <mx-menu-item :selected="activeTab === 0" data-tab-index="0">Subpage</mx-menu-item>
    <mx-menu-item :selected="activeTab === 1" data-tab-index="1">
      Subpage 2
      <mx-menu-accordion slot="accordion">
        <a href="#section-1"><mx-menu-item data-tab-index="1">Section 2.1</mx-menu-item></a>
        <a href="#section-2"><mx-menu-item data-tab-index="1">Section 2.2</mx-menu-item></a>
      </mx-menu-accordion>
    </mx-menu-item>
    <mx-menu-item :selected="activeTab === 2" data-tab-index="2">Subpage 3</mx-menu-item>
  </mx-menu>
</mx-submenu>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

When used internally by the mx-top-nav component, the nav prop is set to true. This adjusts the styling of the tabs and causes tabs to overflow into a "More" menu. The tabs will not render as an mx-select. The menuButton prop is also used to allow the mx-top-nav's hamburger button to open the navigation menu. See Top Navigation.

# mx-tabs

# Properties

Property	Attribute	Description	Type	Default
`menuButton`	--	The hamburger menu button from a parent nav component	`HTMLElement`	`undefined`
`nav`	`nav`	When set to true, enables the "More" menu and changes the styling for use inside the Top Navigation component	`boolean`	`false`
`submenu`	`submenu`	Used internally for the mx-submenu component. When set to true, the tabs overflow into a menu when any tab does not fit	`boolean`	`false`
`tabs` (required)	--	An array of objects for each tab (see IMxTabProps Properties)	`IMxTabProps[]`	`undefined`
`value`	`value`	The index of the selected tab	`number`	`null`

# Events

Event	Description	Type
`mxChange`	Emits the newly selected tab's index as `Event.detail`	`CustomEvent<number>`
`mxMenuClose`	Emitted when the menu is closed	`CustomEvent<void>`
`mxMenuOpen`	Emitted when the menu is opened	`CustomEvent<void>`

# Dependencies

# Used by

# Depends on

# Graph

graph TD;
  mx-tabs --> mx-select
  mx-tabs --> mx-tab
  mx-tabs --> mx-menu
  mx-tabs --> mx-menu-item
  mx-tab --> mx-badge
  mx-menu-item --> mx-checkbox
  mx-submenu --> mx-tabs
  mx-top-nav --> mx-tabs
  style mx-tabs fill:#f9f,stroke:#333,stroke-width:4px

1
2
3
4
5
6
7
8
9
10

If you are having trouble setting a prop or adding an event listener, refer to this page.

# mx-tab

# Properties

Property	Attribute	Description	Type	Default
`badge`	`badge`	Display a circular badge	`boolean`	`false`
`badgeClass`	`badge-class`	Additional classes for the badge	`string`	`''`
`elAriaLabel`	`el-aria-label`	If you are not providing a `label`, this should be provided instead for accessibility	`string`	`''`
`elRole`	`el-role`	The button's `role` attribute. This is set internally for the Top Navigation component. This has no effect if `href` is set.	`string`	`'tab'`
`href`	`href`	The URL to link to. This will cause the tab to render an `<a>` instead of a `<button>`.	`any`	`null`
`icon`	`icon`	Class name of icon to display	`string`	`''`
`label`	`label`	Label text to display	`string`	`''`
`nav`	`nav`	This is set by the parent `mx-tabs` if its `nav` prop is also set.	`boolean`	`false`
`selected`	`selected`	Only set this manually if you are NOT setting the `value` prop on the parent `mx-tabs`	`boolean`	`false`
`target`	`target`	The `target` attribute of the link. The only applies if `href` is also set.	`any`	`null`

# Dependencies

# Used by

mx-tabs

# Depends on

mx-badge

# Graph

graph TD;
  mx-tab --> mx-badge
  mx-tabs --> mx-tab
  style mx-tab fill:#f9f,stroke:#333,stroke-width:4px

1
2
3
4

If you are having trouble setting a prop or adding an event listener, refer to this page.

# mx-tab-content

# Properties

Property	Attribute	Description	Type	Default
`index`	`index`	The index of the tab that corresponds to this content	`number`	`undefined`
`value`	`value`	The index of the selected tab	`number`	`undefined`

If you are having trouble setting a prop or adding an event listener, refer to this page.

# mx-submenu

# Properties

Property	Attribute	Description	Type	Default
`tabs`	--	An array of objects for each tab (see Tab Properties)	`IMxTabProps[]`	`undefined`
`value`	`value`	The index of the selected tab (if not setting an `href` for each tab)	`number`	`null`

# Events

Event	Description	Type
`mxChange`	Emits the newly selected tab's index as `Event.detail`	`CustomEvent<number>`

# Dependencies

# Depends on

mx-tabs

# Graph

graph TD;
  mx-submenu --> mx-tabs
  mx-tabs --> mx-select
  mx-tabs --> mx-tab
  mx-tabs --> mx-menu
  mx-tabs --> mx-menu-item
  mx-tab --> mx-badge
  mx-menu-item --> mx-checkbox
  style mx-submenu fill:#f9f,stroke:#333,stroke-width:4px

1
2
3
4
5
6
7
8
9

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Snackbars Timelines →

# Tabs

# Tab Content

# Tabs as Links

# Submenus

# Tabs in Top Navigation

# mx-tabs

# Properties

# Events

# Dependencies

# Used by

# Depends on

# Graph

# mx-tab

# Properties

# Dependencies

# Used by

# Depends on

# Graph

# mx-tab-content

# Properties

# mx-submenu

# Properties

# Events

# Dependencies

# Depends on

# Graph