Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Menu Submenus Checkable

ProNew

A View menu with a radio submenu, a checkbox submenu and plain items with a shortcut, with every choice kept in one settings object in the parent.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use this for the View or Display menu of an editor, canvas or dashboard, where options come in kinds: one of several, any of several, one-off actions.

Do not nest more than two levels, and do not hide the controls people need most inside submenus.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Log in Get Pro for $35

Props

MenuSubmenusCheckable

Prop	Type	Default	Description
`value`	`{ layout, showGrid, showRulers, zoom }`	-	The view settings.
`onValueChange`	`(value) => void`	-	Called with the whole updated object.

Accessibility

Submenu triggers have aria-haspopup="menu" and aria-expanded; radio and checkbox entries report aria-checked.
Checkable choices prevent the default close, so Layout and Show can be changed in one visit.
Zoom shows the current value in its label, and the current zoom item is disabled so it is not offered as a change.

Keyboard

Key	Action
ArrowRight on a submenu item	opens it
ArrowLeft	closes it and returns to the parent item
Space or Enter	toggles a checkable item (the menu stays open)

Testing

The pattern ships a Testing Library test (menu-submenus-checkable.test.tsx) that covers submenu keyboard navigation, layout radio state, checkable items and zoom actions.