Application menu context stack

The application menu context stack renders a context menu panel for every matched route record that exposes a named view. Each panel slides in horizontally as the user drills deeper into the route tree.

To use it, expose a menu named view on every route that should contribute a context menu:

router.ts

const routes: RouteRecordRaw[] = [
    {
        path: '/projects/:id',
        components: {
            default: () => import('./views/ProjectOverview.vue'),
            menu: () => import('./views/ProjectMenu.vue') 
        }
    }
];

The matched menu components are then rendered through <FluxApplicationMenuContextStack> in the order of their depth in route.matched.

Props

name?: string
The name of the named route view that holds the context menu component for each level of the route tree.
Default: menu

Snippet

FluxApplicationMenuContextStack.vue

<template>
    <FluxApplicationMenu>
        <!-- Main menu items. -->

        <template #context>
            <FluxApplicationMenuContextStack name="menu"/>
        </template>
    </FluxApplicationMenu>
</template>

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

Used components

• Application menu
• Menu