Menu

This component serves as the base structure for creating menus. It displays its child elements vertically, making it perfect for side navigations or flyout menus. It offers basic accessibility features to ensure better user interaction.

It allows you to easily insert custom content and handles keyboard navigation to enhance functionality. With this component, you can build structured and flexible navigation menus without much hassle.

Props

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

Slots

default
The content of the menu.

Examples

Basic

A basic menu that consists of a few items.

Preview

Code

<template>
    <FluxMenu>
        <FluxMenuItem
            icon-leading="grid-2"
            label="Overview"/>

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

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

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

Pane

Panes have first-class support for menus inside them. Place a menu directly inside a Pane to create a contained menu.

Preview

Code

<template>
    <FluxPane>
        <FluxMenu>
            <FluxMenuGroup>
                <FluxMenuItem
                    icon-leading="grid-2"
                    label="Overview"/>
            </FluxMenuGroup>

            <FluxSeparator/>

            <FluxMenuGroup>
                <FluxMenuItem
                    icon-leading="rocket"
                    label="Releases"/>

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

            <FluxSeparator/>

            <FluxMenuGroup>
                <FluxMenuItem
                    icon-leading="gear"
                    label="Settings"/>
            </FluxMenuGroup>
        </FluxMenu>
    </FluxPane>
</template>

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