> For the complete documentation index, see [llms.txt](https://designsystem.dubai.ae/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://designsystem.dubai.ae/components/menu.md).

# Menu

## Overview

<figure><img src="/files/M5lYu4EBYNQTIzb2HTk9" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

The menu component should be utilized across all pages of the website to ensure consistent navigation. It acts as a gateway to various sections of the site, enabling users to effortlessly find and access essential content from any page.

### How it works

The menu component is organized into essential areas: branding, navigation, and user tools. The branding zone displays the logo, establishing the site's identity. Navigation links offer direct access to major sections, with current location highlighted. User tools might include a search function, accessibility options, language selection, and account access. Designed for responsiveness, the menu adjusts seamlessly to various device screens, maintaining functionality and visual integrity.

## Code

Refer to [header](/components/header.md) component.

## Anatomy

<figure><img src="/files/eW2w19vZ3oDNAryQFGYg" alt=""><figcaption></figcaption></figure>

**Lead-element Icon**: Positioned at the very beginning of the menu, this mandatory icon serves as a visual anchor, typically symbolizing the menu’s function or representing the menu item.

**Menu Item**: Each menu item functions as an interactive link within the menu structure, designed to facilitate easy navigation between different sections of the application or website. Typically labeled with concise text that clearly describes its destination or function, a menu item may also include an icon that aligns with its purpose for quick visual recognition.

**Selected Menu Item**: Highlighted differently from other items, indicating that it is the current page or section the user is viewing. This helps in improving navigational clarity.

**Chevron Icon**: This icon next to 'Apps & Services' suggests that the item is expandable, revealing additional information or related options upon interaction.

***

## Dos and Don'ts

| Dos                                                                                  | Don'ts                                                                      |
| ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- |
| Reserve the top area for primary navigation links.                                   | Do not place non-essential links in prime navigation spots.                 |
| Use clear, simple language for menu labels.                                          | Avoid vague or ambiguous labels that can confuse users.                     |
| Ensure high contrast between text and background for readability.                    | Do not use low contrast for text that makes reading difficult.              |
| Maintain consistent styles and colors for icons.                                     | Avoid inconsistent iconography that can confuse users.                      |
| Design the menu to be responsive across all devices.                                 | Neglect mobile users or fail to adjust the menu for different screen sizes. |
| Follow accessibility standards like keyboard navigability and screen reader support. | Ignore accessibility, making the menu difficult for disabled users to use.  |
| Keep navigation patterns consistent across the site.                                 | Change navigation layouts or paths frequently, disorienting users.          |
| Use visual hierarchy to highlight important menu items.                              | Treat all menu items with the same visual importance.                       |


---

# 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://designsystem.dubai.ae/components/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.