Tabs
React Bootstrap 5 Tabs component
Tabs are quasi-navigation components which can highly improve website clarity and increase user experience.
Note: Read the API tab to find all available options and advanced customization
Basic example
Basic tabs are divided into 2 main sections -
Tabs navs (containing nav-item
s) and
Tabs content (containing tab-pane
s).
Use useState
to connect tabs navs with tabs content.
import React, { useState } from 'react';
import {
MDBTabs,
MDBTabsItem,
MDBTabsLink,
MDBTabsContent,
MDBTabsPane
} from 'mdb-react-ui-kit';
export default function App() {
const [basicActive, setBasicActive] = useState('tab1');
const handleBasicClick = (value: string) => {
if (value === basicActive) {
return;
}
setBasicActive(value);
};
return (
<>
<MDBTabs className='mb-3'>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleBasicClick('tab1')} active={basicActive === 'tab1'}>
Tab 1
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleBasicClick('tab2')} active={basicActive === 'tab2'}>
Tab 2
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleBasicClick('tab3')} active={basicActive === 'tab3'}>
Tab 3
</MDBTabsLink>
</MDBTabsItem>
</MDBTabs>
<MDBTabsContent>
<MDBTabsPane show={basicActive === 'tab1'}>Tab 1 content</MDBTabsPane>
<MDBTabsPane show={basicActive === 'tab2'}>Tab 2 content</MDBTabsPane>
<MDBTabsPane show={basicActive === 'tab3'}>Tab 3 content</MDBTabsPane>
</MDBTabsContent>
</>
);
}
Fill and justify
Force your .nav
's contents to extend the full available width one of two modifier
properties.
Fill
To proportionately fill all available space with your MDBTabsItem
s, use
fill
property. Notice that all horizontal space is occupied, but not every nav item
has the same width.
import React, { useState } from 'react';
import {
MDBTabs,
MDBTabsItem,
MDBTabsLink,
MDBTabsContent,
MDBTabsPane
} from 'mdb-react-ui-kit';
export default function App() {
const [fillActive, setFillActive] = useState('tab1');
const handleFillClick = (value: string) => {
if (value === fillActive) {
return;
}
setFillActive(value);
};
return (
<>
<MDBTabs fill className='mb-3'>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleFillClick('tab1')} active={fillActive === 'tab1'}>
Link
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleFillClick('tab2')} active={fillActive === 'tab2'}>
Very very very very long link
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleFillClick('tab3')} active={fillActive === 'tab3'}>
Another link
</MDBTabsLink>
</MDBTabsItem>
</MDBTabs>
<MDBTabsContent>
<MDBTabsPane show={fillActive === 'tab1'}>Tab 1 content</MDBTabsPane>
<MDBTabsPane show={fillActive === 'tab2'}>Tab 2 content</MDBTabsPane>
<MDBTabsPane show={fillActive === 'tab3'}>Tab 3 content</MDBTabsPane>
</MDBTabsContent>
</>
);
}
Justify
For equal-width elements, use justify
property. All horizontal space will be
occupied by nav links, but unlike the fill
property above, every nav item will be
the same width.
import React, { useState } from 'react';
import {
MDBTabs,
MDBTabsItem,
MDBTabsLink,
MDBTabsContent,
MDBTabsPane
} from 'mdb-react-ui-kit';
export default function App() {
const [justifyActive, setJustifyActive] = useState('tab1');
const handleJustifyClick = (value: string) => {
if (value === justifyActive) {
return;
}
setJustifyActive(value);
};
return (
<>
<MDBTabs justify className='mb-3'>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleJustifyClick('tab1')} active={justifyActive === 'tab1'}>
Link
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleJustifyClick('tab2')} active={justifyActive === 'tab2'}>
Very very very very long link
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleJustifyClick('tab3')} active={justifyActive === 'tab3'}>
Another link
</MDBTabsLink>
</MDBTabsItem>
</MDBTabs>
<MDBTabsContent>
<MDBTabsPane show={justifyActive === 'tab1'}>Tab 1 content</MDBTabsPane>
<MDBTabsPane show={justifyActive === 'tab2'}>Tab 2 content</MDBTabsPane>
<MDBTabsPane show={justifyActive === 'tab3'}>Tab 3 content</MDBTabsPane>
</MDBTabsContent>
</>
);
}
Vertical
Stack your navigation by changing the flex item direction with the
.flex-column
utility. Need to stack them on some viewports but not others? Use
the responsive versions (e.g., .flex-sm-column
).
For proper layout, you may also need to use grid to adjust navs and content.
import React, { useState } from 'react';
import {
MDBTabs,
MDBTabsItem,
MDBTabsLink,
MDBTabsContent,
MDBTabsPane,
MDBRow,
MDBCol
} from 'mdb-react-ui-kit';
export default function App() {
const [verticalActive, setVerticalActive] = useState('tab1');
const handleVerticalClick = (value: string) => {
if (value === verticalActive) {
return;
}
setVerticalActive(value);
};
return (
<>
<MDBRow>
<MDBCol size='3'>
<MDBTabs className='flex-column text-center'>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleVerticalClick('tab1')} active={verticalActive === 'tab1'}>
Home
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleVerticalClick('tab2')} active={verticalActive === 'tab2'}>
Profile
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleVerticalClick('tab3')} active={verticalActive === 'tab3'}>
Messages
</MDBTabsLink>
</MDBTabsItem>
</MDBTabs>
</MDBCol>
<MDBCol size='9'>
<MDBTabsContent>
<MDBTabsPane show={verticalActive === 'tab1'}>Home content</MDBTabsPane>
<MDBTabsPane show={verticalActive === 'tab2'}>Profile content</MDBTabsPane>
<MDBTabsPane show={verticalActive === 'tab3'}>Messages content</MDBTabsPane>
</MDBTabsContent>
</MDBCol>
</MDBRow>
</>
);
}
Tabs with icons
Use one of 1541 icons and add it to the tabs. See the icon docs to explore all the available icons.
import React, { useState } from 'react';
import {
MDBIcons,
MDBTabs,
MDBTabsItem,
MDBTabsLink,
MDBTabsContent,
MDBTabsPane
} from 'mdb-react-ui-kit';
export default function App() {
const [iconsActive, setIconsActive] = useState('tab1');
const handleIconsClick = (value: string) => {
if (value === iconsActive) {
return;
}
setIconsActive(value);
};
return (
<>
<MDBTabs className='mb-3'>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleIconsClick('tab1')} active={iconsActive === 'tab1'}>
<MDBIcon fas icon='chart-pie' className='me-2' /> Sales
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleIconsClick('tab2')} active={iconsActive === 'tab2'}>
<MDBIcon fas icon='chart-line' className='me-2' /> Subscriptions
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleIconsClick('tab3')} active={iconsActive === 'tab3'}>
<MDBIcon fas icon='cogs' className='me-2' /> Settings
</MDBTabsLink>
</MDBTabsItem>
</MDBTabs>
<MDBTabsContent>
<MDBTabsPane show={iconsActive === 'tab1'}>Tab 1 content</MDBTabsPane>
<MDBTabsPane show={iconsActive === 'tab2'}>Tab 2 content</MDBTabsPane>
<MDBTabsPane show={iconsActive === 'tab3'}>Tab 3 content</MDBTabsPane>
</MDBTabsContent>
</>
);
}
Tabs - API
Import
import {
MDBTabs,
MDBTabsItem,
MDBTabsLink,
MDBTabsContent,
MDBTabsPane
} from 'mdb-react-ui-kit';
Properties
MDBTabs
Name | Type | Default | Description | Example |
---|---|---|---|---|
className
|
string |
|
Adds a custom class to the MDBTabs |
<MDBTabs className="class">...</MDBTabs>
|
fill
|
boolean | false |
Fills the available space in MDBTabs items |
<MDBTabs fill>...</MDBTabs>
|
justify
|
boolean | false |
Sets equal width of the MDBTabs items |
<MDBTabs justify>...</MDBTabs>
|
pills
|
boolean | false |
Necessary to change the MDBTabs into pills |
<MDBTabs pills>...</MDBTabs>
|
ref
|
React.Ref<any> |
|
A reference to the MDBTabs component |
<MDBTabs ref={someRef}>...</MDBTabs>
|
MDBTabsContent
Name | Type | Default | Description | Example |
---|---|---|---|---|
className
|
string | '' |
Adds a custom class to MDBTabsContent |
<MDBCardHeader className="class" />
|
ref
|
React.Ref<any> | '' |
A reference to the MDBTabsContent component |
<MDBCardHeader ref={someRef} />
|
tag
|
React.ComponentProps<any> | 'div' |
Defines tag of the MDBTabsContent element |
<MDBTabsContent tag="section" />
|
MDBTabsItem
Name | Type | Default | Description | Example |
---|---|---|---|---|
className
|
string | '' |
Adds a custom class to MDBTabsItem |
<MDBTabsItem className="class" />
|
ref
|
React.Ref<any> |
|
A reference to the MDBTabsItem component |
<MDBTabsItem ref={someRef} />
|
MDBTabsLink
Name | Type | Default | Description | Example |
---|---|---|---|---|
active
|
boolean | false |
Defines an active state of the MDBTabsLink |
<MDBTabsLink active />
|
className
|
string | '' |
Adds a custom class to MDBTabsLink |
<MDBTabsLink className="class" />
|
color
|
"primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light" | "dark" | '' |
Allows to change the color of the MDBTabsLink
|
<MDBTabsLink color='danger' />
|
ref
|
React.Ref<any> |
|
A reference to the MDBTabsLink component
|
<MDBTabsLink ref={someRef} />
|
MDBTabsPane
Name | Type | Default | Description | Example |
---|---|---|---|---|
className
|
string | '' |
Adds a custom class to MDBTabsPane |
<MDBTabsPane className="class" />
|
ref
|
React.Ref<any> |
|
A reference to the MDBTabsPane component |
<MDBTabsPane ref={someRef} />
|
show
|
boolean | '' |
Defines MDBTabsPane s content is shown |
<MDBTabsPane show />
|
tag
|
React.ComponentProps<any> | 'div' |
Defines tag of the MDBTabsPane element |
<MDBTabsPane tag="section" />
|
Events
Name | Type | Description |
---|---|---|
onHide
|
() => any | This event is fired immediately when the hide method has been called. It can be triggered in MDBTabsLink element |
onShow
|
() => any | This event fires immediately when the show instance method is called. It can be triggered in MDBTabsLink element |