menu
Menu
Mobify DevCenter
search_icon_focus

Tabs

Tabs provide a compact way to navigate between different sections of content or functional parts of an interface. Tabs appears as a strip of horizontal buttons each attached to a content pane immediately below, allowing the user to reveal a single pane at a time.

The Tabs component is used to display tabbed navigation: a user can select a tab to view its related content.

Related components: TabsPanel.

JavaScript import

import {Tabs, TabsPanel} from 'progressive-web-sdk/dist/components/tabs'

SCSS import

@import 'node_modules/progressive-web-sdk/dist/components/tabs/base';

Props table

Name & DescriptionTypeDefault
childrenrequired

Nodes to be used as tab panels, can be a combination of markup and/or React components. There should be more than 1 child panel.

nodenone
activeIndex
ActiveIndex defines the active panel(selected).
custom0
className
Adds values to the class attribute of the root element.
stringnone
isScrollable
Indicates whether the tab links are scrollable or not.
boolnone
onChange
This function is called whenever the tab is changed.
func() => undefined

Basic example

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark

Content for tab A

With isScrollable

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark

Content for tab A