Flux

Menu sub header ​

This component is used for creating subheaders within menus. It can display an optional icon before and after the label, making it easy to visually separate different sections of a menu.

The label text is prominently displayed, and the subheader plays a role in organizing menu items into more digestible and structured sections. This component helps enhance the readability and usability of complex menus by providing clear visual breaks.

Props

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

icon-trailing?: FluxIconName
Icon at the end of the sub header.

label: string
Label of the sub header.

Examples ​

Grouped

<template>
    <FluxPane style="width: 300px">
        <FluxMenu>
            <FluxMenuGroup>
                <FluxMenuSubHeader label="Releases"/>

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

                <FluxMenuItem
                    icon-leading="cloud"
                    label="Cloud building"/>

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

            <FluxSeparator/>

            <FluxMenuGroup>
                <FluxMenuSubHeader label="Manage"/>

                <FluxMenuItem
                    icon-leading="gear"
                    label="Settings"/>

                <FluxMenuItem
                    icon-leading="trash"
                    is-destructive
                    label="Delete"/>
            </FluxMenuGroup>
        </FluxMenu>
    </FluxPane>
</template>

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

Used components ​