` element.
| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `asChild` | `boolean` | No | `-` | If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props. |
| `class` | `string` | No | `-` | The CSS class(es) to be applied to the component. |
| `attributes` | `array` | No | `[]` | Additional attributes that should be rendered on the component where ui:attributes is used. |
#### Rendered data attributes
| Attribute | Description |
| --- | --- |
| `data-scope` | navigation-menu |
| `data-part` | arrow |
| `data-orientation` | The orientation of the arrow |
### Machine JavaScript API
| Name | Type | Description |
| --- | --- | --- |
| `value` | `string \| null` | The current value of the menu |
| `setValue` | `(value: string) => void` | Sets the value of the menu |
| `open` | `boolean` | Whether the menu is open |
| `isViewportRendered` | `boolean` | Whether the viewport is rendered |
| `getViewportNode` | `() => HTMLElement \| null` | Gets the viewport node element |
| `orientation` | `Orientation` | The orientation of the menu |
| `reposition` | `VoidFunction` | Function to reposition the viewport |
### Accessibility
| Key | Description |
| --- | --- |
| `ArrowDown` | When focus is on trigger (vertical orientation), moves focus to the next trigger. |
| `ArrowUp` | When focus is on trigger (vertical orientation), moves focus to the previous trigger. |
| `ArrowRight` |
When focus is on trigger (horizontal orientation), moves focus to the next trigger.
When focus is on content, moves focus to the next link. |
| `ArrowLeft` |
When focus is on trigger (horizontal orientation), moves focus to the previous trigger.
When focus is on content, moves focus to the previous link. |
| `Home` |
When focus is on trigger, moves focus to the first trigger.
When focus is on content, moves focus to the first link. |
| `End` |
When focus is on trigger, moves focus to the last trigger.
When focus is on content, moves focus to the last link. |
## Anatomy
```html
```
When using the shared viewport pattern, add the optional viewport-related parts:
```html
```