Components

Menu

Menu, dressed in the paper-and-ink system: a quiet paper vessel on elevation, hover as light on the row, checked items as the flat ink fill. The parts — Root, Trigger, ContextTrigger, Indicator, Positioner, Content, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel, TriggerItem, Separator, Arrow, ArrowTip. Ark's namespace is frozen — spread copies the members as data properties so Root can be the sized wrapper and Content carries the rung while the rest stay Ark's own parts.

#Basic usage

menu/basic Vue React

menu/basic.vue

<script setup lang="ts">
import { chevron_down } from "@bysages/icons";
import { Icon, Menu } from "@bysages/vue";
</script>

<template>
  <Menu.Root>
    <Menu.Trigger>
      <span>File</span>
      <Menu.Indicator>
        <Icon :glyph="chevron_down" />
      </Menu.Indicator>
    </Menu.Trigger>
    <Teleport to="body">
      <Menu.Positioner>
        <Menu.Content>
          <Menu.Item value="new-file">New file</Menu.Item>
          <Menu.Item value="open" disabled>Open…</Menu.Item>
          <Menu.ItemGroup>
            <Menu.ItemGroupLabel>Save</Menu.ItemGroupLabel>
            <Menu.Item value="save">Save</Menu.Item>
            <Menu.Item value="save-as">Save as…</Menu.Item>
          </Menu.ItemGroup>
          <Menu.Separator />
          <Menu.Item value="export">Export</Menu.Item>
        </Menu.Content>
      </Menu.Positioner>
    </Teleport>
  </Menu.Root>
</template>

#Props

#ArrowTip

A styled part — no props of its own; it takes the anatomy's shared styling.

#Arrow

A styled part — no props of its own; it takes the anatomy's shared styling.

#CheckboxItem

A styled part — no props of its own; it takes the anatomy's shared styling.

#Content

A styled part — no props of its own; it takes the anatomy's shared styling.

#ContextTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Indicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemContext

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemGroupLabel

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemGroup

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemIndicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemText

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

Prop	Type	Default	Description
`closeOnSelect`	`boolean \| undefined`		Whether the menu should be closed when the option is selected.
`disabled`	`boolean \| undefined`		Whether the menu item is disabled
`value`	`string`		The unique value of the menu item option.
`valueText`	`string \| undefined`		The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

#Positioner

A styled part — no props of its own; it takes the anatomy's shared styling.

#RadioItemGroup

Prop	Type	Default	Description
`id`	`string`		—
`modelValue`	`string`		—

#RadioItem

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the vessel's rows.
`anchorPoint`	`menu.Point`		The positioning point for the menu. Can be set by the context menu trigger or the button trigger.
`aria-label`	`string`		The accessibility label for the menu
`closeOnSelect`	`boolean`	`true`	Whether to close the menu when an option is selected
`composite`	`boolean`	`true`	Whether the menu is a composed with other composite widgets like a combobox or tabs
`defaultHighlightedValue`	`string`		The initial highlighted value of the menu item when rendered. Use when you don't need to control the highlighted value of the menu item.
`defaultOpen`	`boolean`		The initial open state of the menu when rendered. Use when you don't need to control the open state of the menu.
`defaultTriggerValue`	`string \| null`		The initial trigger value when rendered. Use when you don't need to control the trigger value.
`highlightedValue`	`string`		The controlled highlighted value of the menu item.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ trigger: string; contextTrigger: string; content: string; groupLabel(id: string): string; group(id: string): string; positioner: string; arrow: string; }>`		The ids of the elements in the menu. Useful for composition.
`loopFocus`	`boolean`	`false`	Whether to loop the keyboard navigation.
`navigate`	`(details: menu.NavigateDetails) => void`		Function to navigate to the selected item if it's an anchor element
`open`	`boolean`		The controlled open state of the menu
`positioning`	`menu.PositioningOptions`		The options used to dynamically position the menu
`triggerValue`	`string \| null`		The value of the trigger that currently open the menu
`typeahead`	`boolean`	`true`	Whether the pressing printable characters should trigger typeahead navigation

#Separator

A styled part — no props of its own; it takes the anatomy's shared styling.

#TriggerItem

A styled part — no props of its own; it takes the anatomy's shared styling.

#Trigger

Prop	Type	Default	Description
`value`	`string`		The value that identifies this specific trigger