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.

Releases

Manage

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

Preview

Releases

Manage

Code

<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/flux';
</script>