> For the complete documentation index, see [llms.txt](https://docs.webstudio.is/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webstudio.is/university/radix/navigation-menu.md).

# Navigation Menu

> Based on [Radix Navigation Menu](https://www.radix-ui.com/primitives/docs/components/navigation-menu)

The Navigation Menu component creates accessible, multi-level navigation with dropdown menus. It's ideal for website headers with organized sections of links.

## When to Use

Use Navigation Menu for:

* Main website navigation in headers
* Complex navigation with multiple categories
* Mega menus with organized link groups
* Any multi-level navigation structure

## Structure

The Navigation Menu component consists of:

| Component                    | Description                     |
| ---------------------------- | ------------------------------- |
| **Navigation Menu**          | The root container              |
| **Navigation Menu List**     | Container for menu items        |
| **Navigation Menu Item**     | Wrapper for each top-level item |
| **Navigation Menu Trigger**  | Button that opens a dropdown    |
| **Navigation Menu Content**  | The dropdown panel              |
| **Navigation Menu Link**     | A navigation link               |
| **Navigation Menu Viewport** | Where dropdown content renders  |

## How to Use

1. Drag a **Navigation Menu** component from Components > Radix onto your canvas
2. The component comes with sample navigation structure
3. Edit Navigation Menu Links for simple links
4. Use Navigation Menu Trigger + Content for dropdown sections
5. Add your links and content inside each dropdown
6. Style all parts to match your design

### Simple Link (No Dropdown)

For a link without a dropdown, use just a Navigation Menu Link inside the Navigation Menu Item.

### Dropdown Menu

For a dropdown:

1. Add a Navigation Menu Trigger (the clickable text)
2. Add Navigation Menu Content (the dropdown panel)
3. Add your links and content inside Content

## Properties

Some commonly used properties (see the Settings panel for all available options):

### Navigation Menu Link

| Property | Description                |
| -------- | -------------------------- |
| **href** | The URL the link points to |

### Navigation Menu Content

| Property      | Description                                       |
| ------------- | ------------------------------------------------- |
| (Positioning) | Content automatically positions below the trigger |

## Styling States

Some common states (you can also create custom states):

* **Open** (`[data-state=open]`) - Dropdown is visible
* **Closed** (`[data-state=closed]`) - Dropdown is hidden
* **Active** - Current page indicator

## Building a Mega Menu

For large navigation with multiple columns:

1. Inside Navigation Menu Content, create a grid layout
2. Add multiple columns with Link groups
3. Optionally add featured content or images
4. Use the Viewport to control the dropdown container

## Related Videos

{% embed url="<https://www.youtube.com/watch?v=1xSrvEkXWws>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.webstudio.is/university/radix/navigation-menu.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.