Menu title

This component is used to display a title within a menu. The title is highlighted, enhancing the visual structure of the menu by clearly indicating different sections or overall context. This simple yet effective component ensures that users can easily identify the purpose or category of the menu items that follow.

Manage

Props

is-large?: boolean
Enables a larger mode for the menu.

Slots

default
The content of the menu.

Examples

Section

Preview

Company name

Code

<template>
    <FluxPane style="width: 300px; padding-top: 9px;">
        <FluxMenu>
            <FluxMenuTitle title="Company name"/>

            <FluxMenuGroup>
                <FluxMenuItem
                    icon-leading="user"
                    label="Users"/>

                <FluxMenuItem
                    icon-leading="grid-2"
                    label="Dashboard layout"/>

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

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

            <FluxSeparator/>

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

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