Halcyon Docs

Appearance

Menu ​

Preview

Source code
html
<h-menu>
    <template #button>
        <h-icon-button kind="standard" label="Open menu">
            <dots />
        </h-icon-button>
    </template>
    <template #content>
        <h-menu-button label="Item 1" :onClick="() => alert('hey')">
            <template #leading><eye /></template>
        </h-menu-button>
        <h-menu-button label="Item 2" disabled>
            <template #leading><copy /></template>
            <template #trailing>⌘C</template>
        </h-menu-button>
        <h-menu-divider />
        <h-submenu>
            <template #button>
                <h-menu-button label="Item 3" has-submenu />
            </template>
            <template #content>
                <h-menu-button label="Item 4" is-link to="https://m3.material.io" />
                <h-menu-button label="Item 5" is-link to="https://m3.material.io" disabled />
            </template>
        </h-submenu>
    </template>
</h-menu>
<h-menu>
    <template #button>
        <h-icon-button kind="standard" label="Open menu">
            <dots />
        </h-icon-button>
    </template>
    <template #content>
        <h-menu-button label="Item 1" :onClick="() => alert('hey')">
            <template #leading><eye /></template>
        </h-menu-button>
        <h-menu-button label="Item 2" disabled>
            <template #leading><copy /></template>
            <template #trailing>⌘C</template>
        </h-menu-button>
        <h-menu-divider />
        <h-submenu>
            <template #button>
                <h-menu-button label="Item 3" has-submenu />
            </template>
            <template #content>
                <h-menu-button label="Item 4" is-link to="https://m3.material.io" />
                <h-menu-button label="Item 5" is-link to="https://m3.material.io" disabled />
            </template>
        </h-submenu>
    </template>
</h-menu>

Menus display a list of choices on a temporary surface. See the Material 3 documentation for this component.

DANGER

Keyboard navigation currently DOES NOT function with submenus. You should avoid them if so possible, especially for critical functionality.

Props ​

HMenu ​

ts
defineProps<{
    // Whether this should be a scrollable menu or not.
    scrollable?: boolean
}>()
defineProps<{
    // Whether this should be a scrollable menu or not.
    scrollable?: boolean
}>()

HMenuButton ​

ts
defineProps<{
    // The text to be displayed.
    label: string
    // If the button isn't a link, will be run on click, before closing.
    onClick?: () => void
    // Whether this button has a submenu.
    hasSubmenu?: boolean
    // Which element to render the button as. Defaults to `button`.
    as?: string | Component
    // Whether this menu is `disabled`.
    disabled?: boolean
}>()
defineProps<{
    // The text to be displayed.
    label: string
    // If the button isn't a link, will be run on click, before closing.
    onClick?: () => void
    // Whether this button has a submenu.
    hasSubmenu?: boolean
    // Which element to render the button as. Defaults to `button`.
    as?: string | Component
    // Whether this menu is `disabled`.
    disabled?: boolean
}>()

HMenuDivider ​

There are no props available for this component.

HSubmenu ​

This component has the same props available to it as HMenu.

Slots ​

HMenu ​

button ​

The button slot is used for the button which opens the menu.

content ​

The content slot is used for the items of the menu; this should consist of HMenuButtons, HMenuDividers, and HSubmenus.

HMenuButton ​

leading ​

The leading slot is used for the leading icon.

trailing ​

The trailing slot is used for the trailing icon.

HSubmenu ​

This uses the same slots as HMenu, but you must use an HMenuButton for the button slot.