Tabs

Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container

The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite.

Setup

<script>
	import { Tabs, InteractiveTabHead, TabContent } from 'flowbite-svelte';
</script>

Default tabs

Use the following default tabs component example to show a list of links that the user can navigate from on your website.

<script>
  import { let tabs1 = [
		{
			name: 'Profile5',
			id: 1,
			content:
				'1-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '
		},
		{
			name: 'Dashboard',
			id: 2,
			content:
				'1-2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '
		},
		{
			name: 'Settings',
			id: 3,
			content:
				'1-3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '
		},
		{
			name: 'Users',
			id: 4,
			content:
				'1-4Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '
		}
	];
</script>

<Tabs tabId="defaultTab" tabs={tabs1} />

Tabs with underline

Use this alternative tabs component style with an underline instead of a background when hovering and being active on a certain page.

<Tabs tabId="underlineTab" tabs={tabs1} tabStyle="underline" />

Tabs with icons

This is an example of the tabs component where you can also use a SVG powered icon to complement the text within the navigational tabs.

<Tabs tabId="iconTab" tabs={iconTabs} tabStyle="icon" />

Pills tabs

If you want to use pills as a style for the tabs component you can do so by using this example.

<Tabs tabId="pillTab" tabs={tabs1} tabStyle="pill" />

Full width tabs

If you want to show the tabs on the full width relative to the parent element you can do so by using the full width tabs component example.

<Tabs tabId="fullTab" tabs={tabs1} tabStyle="full" />

Disabled tabs

Use disabled: true to disable a tab.

<script>
  let disabledTabs = [
		{
			name: 'Profile',
			id: 1,
			content:
				'1-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '
		},
		{
			name: 'Dashboard',
			id: 2,
			content:
				'1-2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '
		},
		{
			name: 'Disabled 1',
			id: 3,
      disabled: true,
			content:
				'1-3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '
		},
		{
			name: 'Disabled 2',
			id: 4,
      disabled: true,
			content:
				'1-4Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '
		}
	];
</script>

<Tabs tabId="disabledTabs" tabs={disabledTabs} />

Components in tab contents

By using InteractiveTabHead and TabContent you can add other components to the InteractiveTabs component. Here we are adding a timeline component in the tab 1:

<script>
import { InteractiveTabHead, TabContent, Card, Timeline,
		TimelineItem, }from 'flowbite-svelte';
	let tab1 = { name: 'Tab1', id: 1 };
	let tab2 = { name: 'Tab2', id: 2 };
	let tab3 = { name: 'Tab3', id: 3 };
	let tabhead = [tab1, tab2, tab3];
  let timelineItems = [
		{
			date: 'February 2022',
			title: 'Lorem ipsum dolor sit amet',
			href: '/',
			linkname: 'Learn more',
			text: 'Consectetur adipiscing elit...'
		},
		{
			date: 'March 2022',
			title: 'Lorem ipsum dolor sit amet',
			text: 'Consectetur adipiscing elit...'
		},
		{
			date: 'February 2022',
			title: 'Lorem ipsum dolor sit amet',
			text: 'Consectetur adipiscing elit...'
		}
	];
</script>

<InteractiveTabHead tabs={tabhead}>
  <TabContent tab={tab1}>
    <Timeline>
      <TimelineItem {timelineItems} />
    </Timeline>
  </TabContent>
	<TabContent tab={tab2}>
    <p>Test 2 content here</p>
  </TabContent>
	<TabContent tab={tab3}>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla distinctio.</p>
  </TabContent>
</InteractiveTabHead>

Props

The component has the following props, type, and default values. See types page for type information.

Tabs

InteractiveTabHead

TabContent

Forwarded Events: Tabs, InteractiveTabHead

References