Flux

Appearance

Menu group ​

This component provides a container for grouping menu items, adjusting its orientation based on the isHorizontal prop. When set to horizontal, it applies a specific style; otherwise, it defaults to a vertical layout.

Props

is-horizontal?: boolean
Indicates that the items should flow horizontally.

Slots

default
The content of the group.

Examples ​

Vertical

Vertical groups are for combining menu items that share context.

<template>
    <FluxPane style="max-width: 300px">
        <FluxMenu>
            <FluxMenuGroup>
                <FluxMenuItem
                    icon-leading="grid-2"
                    label="Menu item"/>
            </FluxMenuGroup>

            <FluxMenuGroup>
                <FluxMenuItem
                    v-for="i of 3"
                    :is-highlighted="i === 1"
                    icon-leading="grid-2"
                    label="Menu item"/>
            </FluxMenuGroup>

            <FluxMenuGroup>
                <FluxMenuItem
                    v-for="_ of 2"
                    icon-leading="grid-2"
                    label="Menu item"/>
            </FluxMenuGroup>
        </FluxMenu>
    </FluxPane>
</template>

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

Horizontal

Horizontal groups are perfect for menu items that together form a single state, such as the alignment of text.

<template>
    <FluxPane style="max-width: 300px">
        <FluxMenu>
            <FluxMenuGroup is-horizontal>
                <FluxMenuItem
                    icon-leading="align-left"
                    is-highlighted/>

                <FluxMenuItem icon-leading="align-center"/>

                <FluxMenuItem icon-leading="align-right"/>

                <FluxMenuItem icon-leading="align-justify"/>
            </FluxMenuGroup>
        </FluxMenu>
    </FluxPane>
</template>

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

Separated

Groups can also be separated using a separator.

<template>
    <FluxPane style="max-width: 300px">
        <FluxMenu>
            <FluxMenuGroup>
                <FluxMenuItem
                    icon-leading="grid-2"
                    label="Menu item"/>
            </FluxMenuGroup>

            <FluxSeparator/>

            <FluxMenuGroup>
                <FluxMenuItem
                    v-for="i of 3"
                    :is-highlighted="i === 1"
                    icon-leading="grid-2"
                    label="Menu item"/>
            </FluxMenuGroup>

            <FluxSeparator/>

            <FluxMenuGroup>
                <FluxMenuItem
                    v-for="_ of 2"
                    icon-leading="grid-2"
                    label="Menu item"/>
            </FluxMenuGroup>
        </FluxMenu>
    </FluxPane>
</template>

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

Both

Menu's can also have both horizontal and vertical groups in them.

<template>
    <FluxPane style="max-width: 300px">
        <FluxMenu>
            <FluxMenuGroup is-horizontal>
                <FluxMenuItem
                    icon-leading="align-left"
                    is-highlighted/>

                <FluxMenuItem icon-leading="align-center"/>

                <FluxMenuItem icon-leading="align-right"/>

                <FluxMenuItem icon-leading="align-justify"/>
            </FluxMenuGroup>

            <FluxSeparator/>

            <FluxMenuGroup>
                <FluxMenuItem
                    icon-leading="list-ul"
                    label="Unordered list"/>

                <FluxMenuItem
                    icon-leading="list-ol"
                    label="Ordered list"/>

                <FluxMenuItem
                    icon-leading="image"
                    label="Image"/>

                <FluxMenuItem
                    icon-leading="play"
                    label="Video"/>
            </FluxMenuGroup>

            <FluxSeparator/>

            <FluxMenuGroup>
                <FluxMenuItem
                    icon-leading="indent"
                    label="Indent"/>

                <FluxMenuItem
                    icon-leading="outdent"
                    label="Outdent"/>
            </FluxMenuGroup>
        </FluxMenu>
    </FluxPane>
</template>

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