Tabs

The Tabs simplify content organization and navigation by presenting multiple sections or categories in a user-friendly interface.

Tabs Example

This is the text for Tab1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tabs With Orientation

Tab 1
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, consequuntur, illo animi aliquid itaque culpa recusandae optio porro nobis dolores laudantium dolore perferendis esse eius modi voluptates non quibusdam eos.

Tabs With Navigation button

Tab 1
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, consequuntur, illo animi aliquid itaque culpa recusandae optio porro nobis dolores laudantium dolore perferendis esse eius modi voluptates non quibusdam eos.

Props

Explore the available props for the Tabs component

PropTypeDefaultDescription
activebooleanfalseActive state of the accordion.
orientationstringhorizontalOrientation of the tabs.
horizontal vertical
childrennode-Child components and content to be placed within it.
stylestring-Any CSS className to style the Tabs.
navWrapStylestring-Any CSS className to style the TabsNav.
panelWrapStylestring-Any CSS className to style the TabsNav.

Explore the available props for the TabsNav component

PropTypeDefaultDescription
showButtonbooleanfalseshowButton to show the navigation button.
prevIconstringfa-caret-leftIcon name for the previous navigation button.
nextIconstringfa-caret-rightIcon name for the next navigation button.
iconLibrarystringfont-awesomeIcon library name.
font-awesome bootstrap-icons icon-font
prevIconPositionstringleftPrevious button icon position value.
right left
nextIconPositionstringrightNext button icon position value.
right left
prevButtonTextstring-Text for the previous button
nextButtonTextstring-Text for the next button
iconStylestring-Any CSS className to style the icon style.
buttonStylestring-Any CSS className to style the navigation button.
prevButtonStylestring-Any CSS className to style the previous navigation button.
nextButtonStylestring-Any CSS className to style the next navigation button.
disabledStylestring-Any CSS className to style the disabled navigation button.
tabAreaStylestring-Any CSS className to style the Tab area.
activeTabStylestring-Any CSS className to style the active Tab.
stylestring-Any CSS className to style the TabsNav.
childrennode-Child components and content to be placed within it.

Explore the available props for the Tab component

PropTypeDefaultDescription
valuenumber-Value for the tab.
activeTabStylestring-Any CSS className to style the active Tab.
stylestring-Any CSS className to style the TabsNav.
childrennode-Child components and content to be placed within it.

Explore the available props for the TabsPanel component

PropTypeDefaultDescription
valuenumber-Value for the TabsPanel.
stylestring-Any CSS className to style the TabsPanel.
childrennode-Child components and content to be placed within it.