NavMenu
Accessible menu container and items for nav heading popovers. NavHeadingMenu provides role="menu" with keyboard navigation; NavHeadingMenuItem renders individual selectable items. Pass as the menu prop of SideNavHeading or TopNavHeading.
Installation
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
Requires React 19+, base CSS and a Theme provider. See Setup.
Nav Heading Menu
Accessible menu container and items for nav heading popovers. NavHeadingMenu provides role="menu" with keyboard navigation; NavHeadingMenuItem renders individual selectable items. Pass as the menu prop of SideNavHeading or TopNavHeading.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | Menu items. | |
| size | 'sm' | 'md' | 'lg' | 'md' | Controls min-width and item padding. |
| minWidth | number | string | Minimum width override. | |
| xstyle | StyleXStyles | StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}. |
Theming API
{
"targets": [
{
"className": "astryx-nav-heading-menu",
"visualProps": [
"size"
]
},
{
"className": "astryx-nav-heading-menu-item",
"visualProps": [
"size"
]
}
]
}
Anatomy
- Menu: Menu container for nav-heading actions, with menu semantics and keyboard navigation.
- Item: Selectable action or navigation link inside the Menu.
- Icon: Optional Icon-rendered artwork shown before an Item label.
- Text-rendered item label: String Item label rendered through Text.
- Caller-rendered item label: Non-string Item label content rendered directly by the caller.
- Item description: Optional supporting description rendered through Text.
Examples
- Nav Heading Menu: NavHeadingMenu passed as the menu prop of SideNavHeading, letting the heading act as a product switcher popover trigger.