> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Menu

> Dokumentasi Komponen Menu, mencakup metode konfigurasi, properti, dan contoh untuk navigasi atas serta navigasi samping guna membangun struktur navigasi untuk transisi antar halaman.

## Kapan Menggunakan

* Menu navigasi adalah jiwa dari sebuah situs web. Pengguna mengandalkan navigasi untuk berpindah antar halaman. Umumnya dibagi menjadi navigasi atas dan navigasi samping. Navigasi atas menyediakan kategori dan fitur global, sedangkan navigasi samping menawarkan struktur multi-level untuk mengorganisir dan menyusun arsitektur situs.

## Contoh Komponen

## Properti Komponen

| Atribut       | Deskripsi                                                   | Tipe                                                                    | Default                                                                                                                                                                                                                                                                                                                                                                                                     |
| ------------- | ----------------------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `dataSource`  | Sumber Data menu                                            | [MenuDataSource\[\]](/id/open/yida/components/interface#menudatasource) | `[ { label: "Menu Item 1", key: "key1", children: [ { label: "Option 1", key: "key1-1", tag: { text: "Initialized", color: "blue", }, }, { label: "Option 2", key: "key1-2", }, ], }, { isDivider: true, }, { label: "Menu Item 2", key: "key2", children: [ { label: "Option 1", key: "key2-1", }, { label: "Option 2", key: "key2-2", }, ], }, { label: "Menu Item 3", key: "key3", disabled: true, }, ]` |
| `direction`   | Arah tampilan menu tingkat pertama                          | `'ver' \| 'hoz'`                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                           |
| `footer`      | Footer menu Kustom                                          | `string`                                                                | -                                                                                                                                                                                                                                                                                                                                                                                                           |
| `header`      | Header menu Kustom                                          | `string`                                                                | -                                                                                                                                                                                                                                                                                                                                                                                                           |
| `mode`        | Mode pembukaan submenu                                      | `'inline' \| 'popup'`                                                   | `inline`                                                                                                                                                                                                                                                                                                                                                                                                    |
| `onItemClick` | Acara yang dipicu saat item menu diklik                     | `(key: string,item: MenuDataSource, event: any) => void`                | -                                                                                                                                                                                                                                                                                                                                                                                                           |
| `onSelect`    | Acara yang dipicu saat item menu Dipilih atau tidak dipilih | `(selectedKeys: string[] ,extraObj: any) => void`                       | -                                                                                                                                                                                                                                                                                                                                                                                                           |
| `popupAlign`  | Mode Ratakan lapisan popup                                  | `'follow' \| 'outside'`                                                 | `'follow'`                                                                                                                                                                                                                                                                                                                                                                                                  |
| `selectMode`  | Mode seleksi Komponen Menu                                  | `'single' \| 'multiple' \| false`                                       | `false`                                                                                                                                                                                                                                                                                                                                                                                                     |
| `triggerType` | Perilaku Pemicu untuk membuka submenu                       | `'click' \| 'hover'`                                                    | `'click'`                                                                                                                                                                                                                                                                                                                                                                                                   |