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:

<InteractiveTabHead tabs={tabhead}>
  <TabContent tab={tab1}>
    <Timeline>
		<TimelineItem title="Application UI code in Tailwind CSS" date="February 2022">
			<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
				Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar,
				and pre-order E-commerce & Marketing pages.
			</p>
			<Button color="alternative"
				>Learn more<svg
					class="ml-2 w-3 h-3"
					fill="currentColor"
					viewBox="0 0 20 20"
					xmlns="http://www.w3.org/2000/svg"
					><path
						fill-rule="evenodd"
						d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
						clip-rule="evenodd" /></svg
				></Button>
		</TimelineItem>
		<TimelineItem title="Application UI code in Tailwind CSS" date="March 2022">
			<p class="text-base font-normal text-gray-500 dark:text-gray-400">
				All of the pages and components are first designed in Figma and we keep a parity between the
				two versions even as we update the project.
			</p>
		</TimelineItem>
		<TimelineItem title="Application UI code in Tailwind CSS" date="April 2022">
			<p class="text-base font-normal text-gray-500 dark:text-gray-400">
				Get started with dozens of web components and interactive elements built on top of Tailwind
				CSS.
			</p>
		</TimelineItem>
	</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