Flux

Appearance

Menu collapsible ​

A menu item that expands to reveal a nested group of sub-items. When Vue Router is available, the collapsible automatically opens if any direct sub-item's to or href matches the current route.

If a to or href is set on the collapsible itself, clicking the header navigates and opens the group in a single interaction. Without those props, clicking the header simply toggles the open state.

Props

disabled?: boolean
Disable the collapsible header.

href?: string
When set, clicking the header navigates to the URL and opens the collapsible.

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

is-opened?: boolean
Controls the open state externally. Works with v-model.

label?: string
The label shown in the header.

rel?: string
Same as the <a> HTML element (only used with href).

target?: string
Same as the <a> HTML element (only used with href).

to?: To
Vue Router location. When set, clicking the header navigates and opens the collapsible.

Emits

toggle: [boolean]
Triggered when the collapsible opens or closes.

update:isOpened: [boolean]
Two-way binding for the open state.

Examples ​

Basic

A collapsible group without its own route. Click the header to toggle.

<template>
    <FluxPane style="width: 300px">
        <FluxMenu>
            <FluxMenuCollapsible
                icon-leading="cubes"
                label="Projects">
                <FluxMenuItem label="Active"/>

                <FluxMenuItem label="Archived"/>
            </FluxMenuCollapsible>
        </FluxMenu>
    </FluxPane>
</template>

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

A collapsible with a link on the header. Clicking navigates and opens.

<template>
    <FluxPane style="width: 300px">
        <FluxMenu>
            <FluxMenuCollapsible
                href="#reports"
                icon-leading="chart-line"
                label="Reports">
                <FluxMenuItem
                    href="#reports/monthly"
                    label="Monthly"
                    type="link"/>

                <FluxMenuItem
                    href="#reports/quarterly"
                    label="Quarterly"
                    type="link"/>
            </FluxMenuCollapsible>
        </FluxMenu>
    </FluxPane>
</template>

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

Controlled

Control the open state from outside with v-model:isOpened.

<template>
    <FluxStack>
        <FluxButtonStack align="center">
            <FluxSecondaryButton
                label="Toggle"
                @click="isOpened = !isOpened"/>
        </FluxButtonStack>

        <FluxPane style="width: 300px">
            <FluxMenu>
                <FluxMenuCollapsible
                    v-model:is-opened="isOpened"
                    icon-leading="cubes"
                    label="Projects">
                    <FluxMenuItem label="Active"/>

                    <FluxMenuItem label="Archived"/>
                </FluxMenuCollapsible>
            </FluxMenu>
        </FluxPane>
    </FluxStack>
</template>

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

    const isOpened = ref(true);
</script>

Used components ​