Tabs

processed with Commons Bootstrap 4.3 + Material Kit
Documentation / Tabs

Tabs are rendered using several macros:


Tabs inside a box



Tabs bar


Box with tabs

Vivamus sit amet consectetur erat, vitae ullamcorper urna. Vestibulum semper at lorem ac pellentesque.

Nulla eget mi sagittis, posuere magna in, tempor lectus.

Nam a lectus dignissim, lobortis urna in, suscipit purus. In a leo ac velit aliquam interdum eu et magna.

Pellentesque interdum vehicula nisl, sed varius arcu viverra eu. Aenean luctus id eros vitae sagittis.

Duis a semper eros, et rutrum felis. Suspendisse a tincidunt nisl.

Vivamus viverra nibh ac semper sodales. Phasellus tortor est, condimentum pulvinar sem eget, facilisis accumsan eros.

<@row>
	<@columns>
		<@box>
			<@boxHeader title='Box with tabs' />
			<@boxBody>
				<@tabs>
					<@tabList>
						<@tabLink href='#tab0' active=true title='Tab 0' />
						<@tabLink href='#tab1' title='Tab 1' />
						<@tabLink href='#tab2' title='Tab 2' />
					</@tabList>
					<@tabContent>
						<@tabPanel id='tab0' active=true>
							<p>Vivamus sit amet consectetur erat, vitae 
							ullamcorper urna. Vestibulum semper at lorem ac 
							pellentesque.</p>
							<p>Nulla eget mi sagittis, posuere magna 
							in, tempor lectus.</p>
						</@tabPanel>
						<@tabPanel id='tab1' active=false>
							<p>Nam a lectus dignissim, lobortis urna 
							in, suscipit purus. In a leo ac velit aliquam 
							interdum eu et magna.</p>
							<p>Pellentesque interdum vehicula nisl, sed 
							varius arcu viverra eu. Aenean luctus id eros 
							vitae sagittis.</p> 
						</@tabPanel>
						<@tabPanel id='tab2' active=false>
							<p>Duis a semper eros, et rutrum felis. 
							Suspendisse a tincidunt nisl.</p>
							<p>Vivamus viverra nibh ac semper sodales. 
							Phasellus tortor est, condimentum pulvinar sem 
							eget, facilisis accumsan eros.</p>
						</@tabPanel>
					</@tabContent>
				</@tabs>
			</@boxBody>
		</@box>
	</@columns>
</@row>

Tabs pills



Horizontal tabs


Box with horizontal tabs

Vivamus sit amet consectetur erat, vitae ullamcorper urna. Vestibulum semper at lorem ac pellentesque.

Nulla eget mi sagittis, posuere magna in, tempor lectus.

Nam a lectus dignissim, lobortis urna in, suscipit purus. In a leo ac velit aliquam interdum eu et magna.

Pellentesque interdum vehicula nisl, sed varius arcu viverra eu. Aenean luctus id eros vitae sagittis.

Duis a semper eros, et rutrum felis. Suspendisse a tincidunt nisl.

Vivamus viverra nibh ac semper sodales. Phasellus tortor est, condimentum pulvinar sem eget, facilisis accumsan eros.

<@row>
	<@columns>
		<@box>
			<@boxHeader title='Box with horizontal tabs' />
			<@boxBody>
				<@tabs style='pills'>
					<@tabList>
						<@tabLink href='#tab3' active=true title='Tab 0' />
						<@tabLink href='#tab4' title='Tab 1' />
						<@tabLink href='#tab5' title='Tab 2' />
					</@tabList>
					<@tabContent>
						<@tabPanel id='tab3' active=true>
							<p>Vivamus sit amet consectetur 
							erat, vitae ullamcorper urna. Vestibulum 
							semper at lorem ac pellentesque.</p>
							<p>Nulla eget mi sagittis, posuere 
							magna in, tempor lectus.</p>
						</@tabPanel>
						<@tabPanel id='tab4' active=false>
							<p>Nam a lectus dignissim, lobortis 
							urna in, suscipit purus. In a leo ac 
							velit aliquam interdum eu et magna.</p>
							<p>Pellentesque interdum vehicula 
							nisl, sed varius arcu viverra eu. Aenean 
							luctus id eros vitae sagittis.</p> 
						</@tabPanel>
						<@tabPanel id='tab5' active=false>
							<p>Duis a semper eros, et rutrum 
							felis. Suspendisse a tincidunt nisl.</p>
							<p>Vivamus viverra nibh ac semper 
							sodales. Phasellus tortor est, 
							condimentum pulvinar sem eget, facilisis 
							accumsan eros.</p>
						</@tabPanel>
					</@tabContent>
				</@tabs>
			</@boxBody>
		</@box>
	</@columns>
</@row>

Vertical tabs


Box with vertical tabs

Vivamus sit amet consectetur erat, vitae ullamcorper urna. Vestibulum semper at lorem ac pellentesque.

Nulla eget mi sagittis, posuere magna in, tempor lectus.

Nam a lectus dignissim, lobortis urna in, suscipit purus. In a leo ac velit aliquam interdum eu et magna.

Pellentesque interdum vehicula nisl, sed varius arcu viverra eu. Aenean luctus id eros vitae sagittis.

Duis a semper eros, et rutrum felis. Suspendisse a tincidunt nisl.

Vivamus viverra nibh ac semper sodales. Phasellus tortor est, condimentum pulvinar sem eget, facilisis accumsan eros.

<@row>
	<@columns>
		<@box>
			<@boxHeader title='Box with vertical tabs' />
			<@boxBody>
				<@tabs style='pills'>
					<@row>
						<@columns sm=2>
							<@tabList vertical=true>
								<@tabLink href='#tab6' active=true title='Tab 0' />
								<@tabLink href='#tab7' title='Tab 1' />
								<@tabLink href='#tab8' title='Tab 2' />
							</@tabList>
						</@columns>
						<@columns sm=10>
							<@tabContent>
								<@tabPanel id='tab6' active=true>
									<p>Vivamus sit amet 
									consectetur erat, vitae 
									ullamcorper urna. Vestibulum 
									semper at lorem ac pellentesque.</p>
									<p>Nulla eget mi sagittis, 
									posuere magna in, tempor lectus.</p>
								</@tabPanel>
								<@tabPanel id='tab7' active=false>
									<p>Nam a lectus dignissim, 
									lobortis urna in, suscipit 
									purus. 
									In a leo ac velit aliquam 
									interdum eu et magna.</p>
									<p>Pellentesque interdum 
									vehicula nisl, sed varius arcu 
									viverra eu. Aenean luctus id eros 
									vitae sagittis.</p> 
								</@tabPanel>
								<@tabPanel id='tab8' active=false>
									<p>Duis a semper eros, et 
									rutrum felis. Suspendisse a 
									tincidunt nisl.</p>
									<p>Vivamus viverra nibh ac 
									semper sodales. Phasellus tortor 
									est, condimentum pulvinar sem 
									eget, facilisis accumsan eros.</p>
								</@tabPanel>
							</@tabContent>
						</@columns>
					</@row>
				</@tabs>
			</@boxBody>
		</@box>
	</@columns>
</@row>

Tabs container (without box)


Tabs can also be used by themselves as a page or section container.

In this example, we're using icons on tab links.

Vivamus sit amet consectetur erat, vitae ullamcorper urna. Vestibulum semper at lorem ac pellentesque.

Nulla eget mi sagittis, posuere magna in, tempor lectus.

Nam a lectus dignissim, lobortis urna in, suscipit purus. In a leo ac velit aliquam interdum eu et magna.

Pellentesque interdum vehicula nisl, sed varius arcu viverra eu. Aenean luctus id eros vitae sagittis.

Duis a semper eros, et rutrum felis. Suspendisse a tincidunt nisl.

Vivamus viverra nibh ac semper sodales. Phasellus tortor est, condimentum pulvinar sem eget, facilisis accumsan eros.

<@row>
	<@columns>
		<@tabs>
			<@tabList>
				<@tabLink href='#tab9' active=true title='Tab 0' tabIcon='archway' />
				<@tabLink href='#tab10' title='Tab 1' tabIcon='balance-scale' />
				<@tabLink href='#tab11' title='Tab 2' tabIcon='book' />
			</@tabList>
			<@tabContent>
				<@tabPanel id='tab9' active=true>
					<p>Vivamus sit amet consectetur erat, vitae
					ullamcorper urna. Vestibulum semper at lorem ac
					pellentesque.</p>
					<p>Nulla eget mi sagittis, posuere magna in, tempor
					lectus.</p>
				</@tabPanel>
				<@tabPanel id='tab10'>
					<p>Nam a lectus dignissim, lobortis urna in, 
					suscipit purus. In a leo ac velit aliquam interdum eu et
					magna.</p>
					<p>Pellentesque interdum vehicula nisl, sed varius
					arcu viverra eu. Aenean luctus id eros vitae sagittis.</p>
				</@tabPanel>
				<@tabPanel id='tab11'>
					<p>Duis a semper eros, et rutrum felis. Suspendisse
					a tincidunt nisl.</p>
					<p>Vivamus viverra nibh ac semper sodales. 
					Phasellus tortor est, condimentum pulvinar sem eget, 
					facilisis accumsan eros.</p>
				</@tabPanel>
			</@tabContent>
		</@tabs>
	</@columns>
</@row>

# Parameters documentation



Tabs


Parameter Value Default
color string -
class string -
id string -
hide sequence -
collapsed boolean false
params string -