# 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: 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:

```
GET https://designsystem.dubai.ae/components/menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.