Flux

Menu ​

The menu is the base structure for building menus. It stacks its child elements vertically, which suits side navigations and flyout menus, and provides basic accessibility features.

Insert custom content freely; the menu handles keyboard navigation for you.

Props

is-large?: boolean
Enables a larger mode for the menu.

is-persistent?: boolean
When enabled, clicking any item inside this menu keeps it (or its hosting flyout) open instead of closing it. Defaults to false; individual items can also opt in via their own is-persistent.

Slots

default
The content of the menu.

Examples ​

Basic

A basic menu that consists of a few items.

<template>
    <FluxMenu>
        <FluxMenuGroup>
            <FluxMenuItem
                icon-leading="grid-2"
                label="Overview"/>

            <FluxMenuItem
                icon-leading="rocket"
                label="Releases"/>

            <FluxMenuItem
                icon-leading="rectangle-history"
                label="History"/>
        </FluxMenuGroup>
    </FluxMenu>
</template>

<script
    lang="ts"
    setup>
    import { FluxMenu, FluxMenuGroup, FluxMenuItem } from '@flux-ui/components';
</script>

Pane

Panes have first-class support for menus inside them. Place a menu directly inside a Pane to create a contained menu.

<template>
    <FluxPane>
        <FluxMenu>
            <FluxMenuGroup>
                <FluxMenuItem
                    icon-leading="grid-2"
                    label="Overview"/>
            </FluxMenuGroup>

            <FluxSeparator/>

            <FluxMenuGroup>
                <FluxMenuItem
                    icon-leading="rocket"
                    label="Releases"/>

                <FluxMenuItem
                    icon-leading="rectangle-history"
                    label="History"/>
            </FluxMenuGroup>

            <FluxSeparator/>

            <FluxMenuGroup>
                <FluxMenuItem
                    icon-leading="gear"
                    label="Settings"/>
            </FluxMenuGroup>
        </FluxMenu>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxMenu, FluxMenuGroup, FluxMenuItem, FluxPane, FluxSeparator } from '@flux-ui/components';
</script>