# or
yarn add @zag-js/menu @zag-js/svelte
```

## Anatomy

To set up the menu correctly, you'll need to understand its anatomy and how we
name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.



## Usage

First, import the menu package into your project

```jsx
import * as menu from "@zag-js/menu"
```

The menu package exports two key functions:

- `machine` â The state machine logic for the menu widget.
- `connect` â The function that translates the machine's state to JSX attributes
  and event handlers.

> You'll need to provide a unique `id` to the `useMachine` hook. This is used to
> ensure that every part has a unique identifier.

Next, import the required hooks and functions for your framework and use the
menu machine in your project ð¥

To show the menu when a trigger element is right-clicked, use the
`contextTriggerProps` provided by the menu's connect function.

Context menu's are also opened during a long-press of roughly `700ms` when the
pointer is pen or touch.

```svelte
<script lang="ts">
  import * as menu from "@zag-js/menu"
  import { normalizeProps, useMachine } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(menu.machine, { id })
  const api = $derived(menu.connect(service, normalizeProps))
</script>

<div>
  <div {...api.getContextTriggerProps()}>
    <div>Open context menu</div>
  </div>
  <div {...api.getPositionerProps()}>
    <ul {...api.getContentProps()}>
      <li {...api.getItemProps({ value: "edit" })}>Edit</li>
      <li {...api.getItemProps({ value: "duplicate" })}>Duplicate</li>
      <li {...api.getItemProps({ value: "delete" })}>Delete</li>
      <li {...api.getItemProps({ value: "export" })}>Export...</li>
    </ul>
  </div>
</div>
```

## Styling guide

Earlier, we mentioned that each menu part has a `data-part` attribute added to
them to select and style them in the DOM.

### Highlighted item state

When an item is highlighted, via keyboard navigation or pointer, it is given a
`data-highlighted` attribute.

```css
[data-part="item"][data-highlighted] {
  /* styles for highlighted state */
}

[data-part="item"][data-type="radio|checkbox"][data-highlighted] {
  /* styles for highlighted state */
}
```

### Disabled item state

When an item or an option item is disabled, it is given a `data-disabled`
attribute.

```css
[data-part="item"][data-disabled] {
  /* styles for disabled state */
}

[data-part="item"][data-type="radio|checkbox"][data-disabled] {
  /* styles for disabled state */
}
```

### Using arrows

When using arrows within the menu, you can style it using css variables.

```css
[data-part="arrow"] {
  --arrow-size: 20px;
  --arrow-background: red;
}
```

### Checked option item state

When an option item is checked, it is given a `data-state` attribute.

```css
[data-part="item"][data-type="radio|checkbox"][data-state="checked"] {
  /* styles for checked state */
}
```

## Methods and Properties

### Machine Context

The menu machine exposes the following context properties:

<ContextTable name="menu" />

### Machine API

The menu `api` exposes the following methods:

<ApiTable name="menu" />

### Data Attributes

<DataAttrTable name="menu" />

### CSS Variables

<CssVarTable name="menu" />

## Accessibility

Uses
[aria-activedescendant](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant/)
pattern to manage focus movement among menu items.

### Keyboard Interactions

**`Space`**
Description: Activates/Selects the highlighted item

**`Enter`**
Description: Activates/Selects the highlighted item

**`ArrowDown`**
Description: Highlights the next item in the menu

**`ArrowUp`**
Description: Highlights the previous item in the menu

**`ArrowRight + ArrowLeft`**
Description: When focus is on trigger, opens or closes the submenu depending on reading direction.

**`Esc`**
Description: Closes the context menu
An accessible navigation menu component that provides a list of links with
optional dropdown content. Supports keyboard navigation, hover/click
interactions, animated indicators, and follows WAI-ARIA practices.

## Resources


[Latest version: v1.33.1](https://www.npmjs.com/package/@zag-js/navigation-menu)
[Logic Visualizer](https://zag-visualizer.vercel.app/navigation-menu)
[Source Code](https://github.com/chakra-ui/zag/tree/main/packages/machines/navigation-menu)



**Features**

- Support for basic (inline content) and viewport (shared viewport) patterns
- Hover and click trigger support with configurable delays
- Keyboard navigation with arrow keys, Tab, Home/End
- Animated indicator that follows the active trigger
- Smooth content animations with viewport positioning
- Support for nested links within dropdown content
- Horizontal and vertical orientation
- RTL (right-to-left) support
- Fully managed focus and tab order
- Dismissible with click outside or Escape key

## Installation

To use the navigation menu machine in your project, run the following command in
your command line:

```bash
npm install @zag-js/navigation-menu @zag-js/svelte