Flux

Application menu context ​

The application menu context is the header of a context menu panel. It renders the title and subtitle of the current context together with a back button that either navigates to the parent level (when the user has drilled down through the context stack) or follows the route passed via to/href (when the user opened the context directly).

The component automatically registers its title and subtitle in the parent FluxApplication, so other components, such as the breadcrumbs in the top bar, can reflect the current context.

Props

title: string
The title of the context, typically the name of the resource the user is viewing.

subtitle?: string
An optional subtitle shown below the title.

to?: FluxTo
The route to navigate to when the back button is pressed and the user is at the root level.

entry-to?: FluxTo
An override for the route registered as the entry point of this context. By default the closest matched named route is used.

href?: string
An external URL to navigate to when the back button is pressed and the user is at the root level.

rel?: string
The `rel` attribute applied to the back button when used as a link.

target?: string
The `target` attribute applied to the back button when used as a link.

tabindex?: string | number
The `tabindex` attribute applied to the back button.

type?: FluxPressableType
The pressable type applied to the back button when used as a link.

Snippet ​

vue
<template>
    <FluxApplicationMenuContext
        title="Project Aurora"
        subtitle="Settings"
        :to="{name: 'projects'}"/>
</template>

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

Used components ​