Flux

Appearance

Application menu ​

The application menu is the sidebar of FluxApplication. It hosts the main menu and any number of context menu panels that slide in horizontally as the user navigates deeper into the route tree. When more than one level is visible, page indicator dots are rendered at the bottom so the user can jump to any level directly.

The collapsed state of the menu is shared with the rest of the application through useApplicationInjection.

Props

show-page-indicator?: boolean
Whether to show the page indicator dots when the menu has more than one level.
Default: true

Slots

default
The main menu content — typically a list of `FluxMenuItem` and `FluxMenuGroup` components.

context
The slot used to render context menu panels — typically a single `FluxApplicationMenuContextStack`.

header
The header of the menu, rendered above all panels (e.g. a logo).

footer
The footer of the menu, rendered below all panels (e.g. an account menu item).

Snippet ​

vue
<template>
    <FluxApplicationMenu>
        <template #header>
            <!-- Optional header (e.g. a logo). -->
        </template>

        <!-- Main menu items. -->

        <template #context>
            <FluxApplicationMenuContextStack/>
        </template>

        <template #footer>
            <!-- Optional footer (e.g. an account menu item). -->
        </template>
    </FluxApplicationMenu>
</template>

<script
    setup
    lang="ts">
    import { FluxApplicationMenu, FluxApplicationMenuContextStack } from '@flux-ui/application';
</script>

Used components ​