Flux

Appearance

Application top ​

The application top is the sticky header of the application. It hosts the menu toggle, an optional icon and title, and two slots — start and end — for additional content. When the user scrolls, the top bar gains a subtle elevation so it visually separates from the content below.

The component also exposes a tabs slot. When provided, a FluxTabBar is rendered below the title so the user can switch between the views of the current page. The tab bar width follows the layout published by Application content.

Props

icon?: FluxIconName
An icon shown next to the title.

title?: string
The title shown at the top of the application.

Slots

start
Content rendered at the start of the top bar, after the menu toggle.

end
Content rendered at the end of the top bar.

tabs
A `FluxTabBar` rendered below the top bar — typically a list of `FluxTabBarItem` components linking to the views of the current page.

Snippet ​

vue
<template>
    <FluxApplicationTop
        icon="house"
        title="Dashboard">
        <template #end>
            <FluxPrimaryButton
                icon-leading="plus"
                label="New"/>
        </template>

        <template #tabs>
            <FluxTabBarItem
                label="Overview"
                :to="{name: 'dashboard.overview'}"/>

            <FluxTabBarItem
                label="Activity"
                :to="{name: 'dashboard.activity'}"/>
        </template>
    </FluxApplicationTop>
</template>

<script
    setup
    lang="ts">
    import { FluxApplicationTop } from '@flux-ui/application';
    import { FluxPrimaryButton, FluxTabBarItem } from '@flux-ui/components';
</script>

Used components ​