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
<template>
<FluxApplicationMenuContext
title="Project Aurora"
subtitle="Settings"
:to="{name: 'projects'}"/>
</template>
<script
setup
lang="ts">
import { FluxApplicationMenuContext } from '@flux-ui/application';
</script>