Pills
React Bootstrap 5 Pills component
Pills 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 pills are divided into 2 main sections -
Pills navs (containing nav-item
s) and
Pills content (containing tab-pane
s).
Use useState
to connect pills navs with pills 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 pills 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 open={basicActive === 'tab1'}>Tab 1 content</MDBTabsPane>
<MDBTabsPane open={basicActive === 'tab2'}>Tab 2 content</MDBTabsPane>
<MDBTabsPane open={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
classes.
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 pills 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 open={fillActive === 'tab1'}>Tab 1 content</MDBTabsPane>
<MDBTabsPane open={fillActive === 'tab2'}>Tab 2 content</MDBTabsPane>
<MDBTabsPane open={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 pills 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 open={justifyActive === 'tab1'}>Tab 1 content</MDBTabsPane>
<MDBTabsPane open={justifyActive === 'tab2'}>Tab 2 content</MDBTabsPane>
<MDBTabsPane open={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 pills 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 open={verticalActive === 'tab1'}>Home content</MDBTabsPane>
<MDBTabsPane open={verticalActive === 'tab2'}>Profile content</MDBTabsPane>
<MDBTabsPane open={verticalActive === 'tab3'}>Messages content</MDBTabsPane>
</MDBTabsContent>
</MDBCol>
</MDBRow>
</>
);
}
Pills with icons
Use one of 1541 icons and add it to the pills. See the icon docs to explore all the available icons.
import React, { useState } from 'react';
import {
MDBIcon,
MDBTabs,
MDBTabsItem,
MDBTabsLink,
MDBTabsContent,
MDBTabsPane
} from 'mdb-react-ui-kit';
export default function App() {
const [iconsActive, setIconsActive] = useState('pill1');
const handleIconsClick = (value: string) => {
if (value === iconsActive) {
return;
}
setIconsActive(value);
};
return (
<>
<MDBTabs pills className='mb-3'>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleIconsClick('pill1')} active={iconsActive === 'pill1'}>
<MDBIcon fas icon='chart-pie' className='me-2' /> Sales
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleIconsClick('pill2')} active={iconsActive === 'pill2'}>
<MDBIcon fas icon='chart-line' className='me-2' /> Subscriptions
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleIconsClick('pill3')} active={iconsActive === 'pill3'}>
<MDBIcon fas icon='cogs' className='me-2' /> Settings
</MDBTabsLink>
</MDBTabsItem>
</MDBTabs>
<MDBTabsContent>
<MDBTabsPane open={iconsActive === 'pill1'}>Tab 1 content</MDBTabsPane>
<MDBTabsPane open={iconsActive === 'pill2'}>Tab 2 content</MDBTabsPane>
<MDBTabsPane open={iconsActive === 'pill3'}>Tab 3 content</MDBTabsPane>
</MDBTabsContent>
</>
);
}
Pills - API
Import
import {
MDBTabs,
MDBTabsItem,
MDBTabsLink,
MDBTabsContent,
MDBTabsPane
} from 'mdb-react-ui-kit';
Properties
MDBTabs
Name | Type | Default | Description | Example |
---|---|---|---|---|
justify
|
boolean | false |
Sets equal width of the MDBTabs items |
<MDBTabs pills justify>...</MDBTabs>
|
fill
|
boolean | false |
Fills the available space in MDBTabs items |
<MDBTabs pills fill>...</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 pills ref={someRef}>...</MDBTabs>
|
MDBTabsContent
Name | Type | Default | Description | Example |
---|---|---|---|---|
tag
|
React.ComponentProps<any> | 'div' |
Defines tag of the MDBTabsContent element |
<MDBTabsContent tag="section" />
|
ref
|
React.Ref<any> | '' |
A reference to the MDBTabsContent component |
<MDBCardHeader ref={someRef} />
|
MDBTabsItem
Name | Type | Default | Description | Example |
---|---|---|---|---|
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 />
|
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 |
---|---|---|---|---|
tag
|
React.ComponentProps<any> | 'div' |
Defines tag of the MDBTabsPane element |
<MDBTabsPane tag="section" />
|
open
|
boolean | '' |
Defines if MDBTabsPane s content is shown |
<MDBTabsPane open />
|
ref
|
React.Ref<any> |
|
A reference to the MDBTabsPane component |
<MDBTabsPane ref={someRef} />
|
CSS variables
As part of MDB’s evolving CSS variables approach, pills now use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
Pills CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.
// .nav
--#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
// .nav-pills
// .nav-link
--#{$prefix}nav-pills-link-border-radius: #{$nav-pills-link-border-radius};
--#{$prefix}nav-pills-link-font-size: #{$nav-pills-link-font-size};
--#{$prefix}nav-pills-link-padding-top: #{$nav-pills-link-padding-top};
--#{$prefix}nav-pills-link-padding-bottom: #{$nav-pills-link-padding-bottom};
--#{$prefix}nav-pills-link-padding-x: #{$nav-pills-link-padding-x};
--#{$prefix}nav-pills-link-line-height: #{$nav-pills-link-line-height};
--#{$prefix}nav-pills-link-hover-bg: #{$nav-pills-link-hover-bg};
--#{$prefix}nav-pills-link-font-weight: #{$nav-pills-link-font-weight};
--#{$prefix}nav-pills-link-color: #{$nav-pills-link-color};
--#{$prefix}nav-pills-margin: #{$nav-pills-margin};
// .nav-link.active,
// .show > .nav-link
--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
SCSS variables
$nav-link-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
$nav-link-disabled-color: $gray-600;
$nav-pills-border-radius: $border-radius;
$nav-pills-margin: 0.5rem;
$nav-pills-link-border-radius: 0.25rem;
$nav-pills-link-font-size: $nav-tabs-link-font-size;
$nav-pills-link-padding-top: $nav-tabs-link-padding-top;
$nav-pills-link-padding-bottom: $nav-tabs-link-padding-bottom;
$nav-pills-link-padding-x: $nav-tabs-link-padding-x;
$nav-pills-link-line-height: 1;
$nav-pills-link-background-color: $nav-tabs-link-hover-background-color;
$nav-pills-link-font-weight: $nav-tabs-link-font-weight;
$nav-pills-link-color: $nav-tabs-link-color;
$nav-pills-link-hover-bg: $nav-tabs-link-hover-bgc;
$nav-pills-link-active-bg: #e3ebf7;
$nav-pills-link-active-color: #285192;