Flux

Appearance

Menu item ​

This component is designed to be a flexible menu item that fits into a navigation or action menu. It leverages the properties of buttons and can display icons, images, and commands to suit various needs.

You can customize it with different states like active, selected, or highlighted, and it's capable of handling click events. Its versatility makes it easy to integrate into any menu structure, enhancing the user experience with well-defined actions and options.

Props

type?: "button" | "link" | "route"
The type of menu item.
Default: button

disabled?: boolean
Disable the menu item.

icon-leading?: FluxIconName
The icon at the start of the menu item.

icon-trailing?: FluxIconName
The icon at the end of the menu item.

is-loading?: boolean
Shows a loading state within the menu item instead of the icon at the start.

label?: string
The label that is shown in the menu item.

command?: string
The label of the menu item command.

command-icon?: string
The icon of the menu item command.

command-loading?: boolean
Enables the loading state of the command.

image-url?: string
An image that shows instead of the before icon.

is-active?: boolean
Indicates that the menu item is active.

is-destructive?: boolean
Indicates that the menu item is a destructive action.

is-highlighted?: boolean
Indicates that the menu item is highlighted.

is-indented?: boolean
Indicates that the menu item is indented (e.g. in a sub-menu structure).

is-selectable?: boolean
Indicates that the menu item is selectable.

is-selected?: boolean
Indicates that the menu item is selected. Only works if is-selectable is also enabled.

tabindex?: string | number
The tabindex of the menu item, works exactly the same as html.

href?: string
This prop is enabled if the menu item's type is set to link. It's the same as the <a> HTML element.

rel?: string
This prop is enabled if the menu item's type is set to link. It's the same as the <a> HTML element.

target?: string
This prop is enabled if the menu item's type is set to link. It's the same as the <a> HTML element.

to?: To
This prop is enabled if the menu item's type is set to route. This integrates with Vue Router.

Emits

click: [MouseEvent]
Triggered when the menu item is clicked.

mouseenter: [MouseEvent]
Triggered when the menu item is being hovered.

mouseleave: [MouseEvent]
Triggered when the menu item is not being hovered anymore.

Examples ​

Basic

A simple menu item with an icon.

<template>
    <FluxPane style="width: 300px">
        <FluxMenu>
            <FluxMenuItem
                icon-leading="heart"
                label="My liked videos"/>

            <FluxMenuItem
                icon-leading="arrow-up-from-square"
                label="My uploads"/>
        </FluxMenu>
    </FluxPane>
</template>

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

Selectable

Menu items can be selectable, mostly used within groups.

<template>
    <FluxPane style="width: 300px">
        <FluxMenu>
            <template v-for="i of 3">
                <FluxMenuItem
                    :is-selected="selected === i"
                    is-selectable
                    :label="`Item ${i}`"
                    @click="selected = i"/>
            </template>
        </FluxMenu>
    </FluxPane>
</template>

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

    const selected = ref(1);
</script>

Keybind

Each menu item can have a keybind (command).

<template>
    <FluxPane style="width: 300px">
        <FluxMenu>
            <FluxMenuItem
                command="⌘C"
                icon-leading="clone"
                label="Copy"/>

            <FluxMenuItem
                command="⌘V"
                icon-leading="clipboard"
                label="Paste"/>
        </FluxMenu>
    </FluxPane>
</template>

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

A menu item can also just contain an icon at the end.

<template>
    <FluxPane style="width: 300px">
        <FluxMenu>
            <FluxMenuItem
                icon-leading="arrow-up-from-square"
                icon-trailing="angle-right"
                label="My uploads"/>
        </FluxMenu>
    </FluxPane>
</template>

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

Spinner

Loading states can also be applied to menu items to indicate that something is loading.

<template>
    <FluxPane style="width: 300px">
        <FluxMenu>
            <FluxMenuItem
                command-icon="angle-right"
                icon-leading="heart"
                label="My liked videos"/>

            <FluxMenuItem
                command="42%"
                command-icon="angle-right"
                icon-leading="arrow-up-from-square"
                is-loading
                label="My uploads"/>

            <FluxMenuItem
                command-loading
                icon-leading="arrow-up-from-square"
                label="My uploads"/>
        </FluxMenu>
    </FluxPane>
</template>

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

Used components ​