Home
Svete 5 Coverage report
Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3

Tabs

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.

Default tabs

Use the following default tabs component example to show a dynamic content in your webpage.

If your tab title is a simple string set the `title` property on `TabItem`, otherwise when more control is needed overwrite the `title` slot.

The last tab in that example shows not only how to show a disabled tab, but how to use the `title` slot entry as well.

Tabs with underline

You can control the style of tabs component by settings the `activeClasses` and `inactiveClasses` on the `TabItem` elements. See the `Custom style` section below for more details.

However tabs component comes with several pre-defined styles that are accessible to you by setting the `tabStyle` property. This will set the `activeClasses` and `inactiveClasses` properties for you.

Use the `tabStyle="underline"` to achieve this alternative tabs component style with an underline instead of a background when hovering and being active on a certain page.

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. Use icon components for a simple syntax. See Icons for more details.

Pills tabs

If you want to use pills as a style for the tabs component use `tabStyle="pill"`.

Full width tabs

If you want to show the tabs on the full width relative to the parent element use `tabStyle="full"` prop.

Components in tab contents

You can add other components to the `TabItem` component. Here we are adding a timeline component in the tab 1: