Tab bar

The tab bar displays a row of navigation tabs, allowing users to switch between different sections or views within the interface. It groups multiple tab items together in a single bar and provides a consistent, easy-to-scan structure for navigating related content areas.

The bar is exposed as a role="tablist" and is fully keyboard navigable: ArrowLeft/ArrowUp and ArrowRight/ArrowDown move between tabs (wrapping around the ends), while Home and End jump to the first and last tab. Disabled tabs are skipped, and the overflow scroll arrows are hidden from assistive technologies. A single roving tab stop keeps the bar reachable with Tab: the selected tab is tabbable, or the first enabled tab when none is selected.

Components

Dashboard

Internals

Props

is-pills?: boolean
If the tab bar should be rendered as pills.

Slots

default
The content of the tab bar.

Examples

Basic

A basic tab bar.

Preview

Components

Dashboard

Internals

Code

<template>
    <FluxPane style="max-width: max-content">
        <FluxPaneBody>
            <FluxTabBar>
                <FluxTabBarItem
                    label="Components"
                    :is-active="index == 0"
                    @click="index = 0"/>

                <FluxTabBarItem
                    label="Dashboard"
                    :is-active="index == 1"
                    @click="index = 1"/>

                <FluxTabBarItem
                    label="Internals"
                    :is-active="index == 2"
                    @click="index = 2"/>
            </FluxTabBar>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
    import { ref } from 'vue';

    const index = ref(0);
</script>

Icon and label

A tab bar with both icons and labels.

Preview

Components

Dashboard

Internals

Code

<template>
    <FluxPane style="max-width: max-content">
        <FluxPaneBody>
            <FluxTabBar>
                <FluxTabBarItem
                    icon="cubes"
                    label="Components"
                    :is-active="index == 0"
                    @click="index = 0"/>

                <FluxTabBarItem
                    icon="desktop"
                    label="Dashboard"
                    :is-active="index == 1"
                    @click="index = 1"/>

                <FluxTabBarItem
                    icon="puzzle-piece"
                    label="Internals"
                    :is-active="index == 2"
                    @click="index = 2"/>
            </FluxTabBar>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
    import { ref } from 'vue';

    const index = ref(0);
</script>

Pane

A tab bar inside a pane.

Preview

Flux packages

Components

Dashboard

Internals

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.

Code

<template>
    <FluxPane>
        <FluxPaneHeader
            title="Flux packages"/>
        <FluxTabBar>
            <FluxTabBarItem
                icon="cubes"
                label="Components"
                :is-active="index == 0"
                @click="index = 0"/>

            <FluxTabBarItem
                icon="desktop"
                label="Dashboard"
                :is-active="index == 1"
                @click="index = 1"/>

            <FluxTabBarItem
                icon="puzzle-piece"
                label="Internals"
                :is-active="index == 2"
                @click="index = 2"/>
        </FluxTabBar>

        <FluxPaneBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxPaneHeader, FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
    import { ref } from 'vue';

    const index = ref(0);
</script>

Pills

A tab bar rendered as pills.

Preview

Components

Dashboard

Internals

Code

<template>
    <FluxPane style="max-width: max-content">
        <FluxPaneBody>
            <FluxTabBar is-pills>
                <FluxTabBarItem
                    label="Components"
                    :is-active="index == 0"
                    @click="index = 0"/>

                <FluxTabBarItem
                    label="Dashboard"
                    :is-active="index == 1"
                    @click="index = 1"/>

                <FluxTabBarItem
                    label="Internals"
                    :is-active="index == 2"
                    @click="index = 2"/>
            </FluxTabBar>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
    import { ref } from 'vue';

    const index = ref(0);
</script>

Pills with icon and label

A pills tab bar with both icons and labels.

Preview

Components

Dashboard

Internals

Code

<template>
    <FluxPane style="max-width: max-content">
        <FluxPaneBody>
            <FluxTabBar is-pills>
                <FluxTabBarItem
                    icon="cubes"
                    label="Components"
                    :is-active="index == 0"
                    @click="index = 0"/>

                <FluxTabBarItem
                    icon="desktop"
                    label="Dashboard"
                    :is-active="index == 1"
                    @click="index = 1"/>

                <FluxTabBarItem
                    icon="puzzle-piece"
                    label="Internals"
                    :is-active="index == 2"
                    @click="index = 2"/>
            </FluxTabBar>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
    import { ref } from 'vue';

    const index = ref(0);
</script>

Pills in pane

A pills tab bar inside a pane.

Preview

Flux packages

Components

Dashboard

Internals

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.

Code

<template>
    <FluxPane>
        <FluxPaneHeader
            title="Flux packages"/>
        <FluxTabBar is-pills>
            <FluxTabBarItem
                icon="cubes"
                label="Components"
                :is-active="index == 0"
                @click="index = 0"/>

            <FluxTabBarItem
                icon="desktop"
                label="Dashboard"
                :is-active="index == 1"
                @click="index = 1"/>

            <FluxTabBarItem
                icon="puzzle-piece"
                label="Internals"
                :is-active="index == 2"
                @click="index = 2"/>
        </FluxTabBar>

        <FluxPaneBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxPaneHeader, FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
    import { ref } from 'vue';

    const index = ref(0);
</script>

Used components

• Icon