# salla-menu (https://docs.salla.dev/twilight/react/web-components/salla-menu)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

Renders the store's navigation menu. Use it in the theme header for the main (and mobile) menu, or in the
footer for a flat list of links. Menu items are fetched from the store unless `source="json"` is used.

With `source="header"` it renders a `<nav id="mobile-menu">` containing both a mobile list and a desktop list
(items with children get a sub-menu, items with products get a mega menu). With `source="footer"` it renders a
flat list of links.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-menu>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaMenu } from '@salla.sa/twilight-components-react/menu';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Try it [#try-it]

<Demo name="web-components/salla-menu" />

## Example [#example]

```tsx
import { SallaMenu } from '@salla.sa/twilight-components-react/menu';

export function Example() {
  return (
    <SallaMenu source="header" />
  );
}
```

```html
<salla-menu source="header"></salla-menu>
```

```tsx
import { SallaMenu } from '@salla.sa/twilight-components-react/menu';

export function Example() {
  return (
    <SallaMenu source="footer" limit={5} />
  );
}
```

```html
<salla-menu source="footer" limit="5"></salla-menu>
```

```tsx
import { SallaMenu } from '@salla.sa/twilight-components-react/menu';

export function Example() {
  return (
    <SallaMenu source="json" sourceValue='[{"id":1,"title":"Offers","url":"/offers","children":[],"attrs":"","link_attrs":""}]' />
  );
}
```

```html
<salla-menu source="json" source-value='[{"id":1,"title":"Offers","url":"/offers","children":[],"attrs":"","link_attrs":""}]'></salla-menu>
```

## Properties [#properties]

| Property                | Attribute                 | Description                                                                                                                                                                                                                                                                                                                                                    | Type                             | Default    |
| ----------------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------- |
| `limit`                 | `limit`                   | Footer menu only. Maximum number of links to show. Has no effect on header menus.                                                                                                                                                                                                                                                                              | `number`                         |            |
| `source`                | `source`                  | Where the menu comes from. `header` and `footer` fetch the store's menu of that name; `json` reads the items from `source-value`.                                                                                                                                                                                                                              | `"footer" \| "header" \| "json"` | `"header"` |
| `sourceValue`           | `source-value`            | Only used when `source="json"`. A JSON string of an array of menu items, each shaped like `{id, title, url, attrs, link_attrs, image, children, products}`. `attrs` and `link_attrs` are strings of `key="value"` pairs separated by spaces and are applied to the `<li>` and `<a>`; both should be provided (use an empty string if unused) for header menus. | `string`                         |            |
| `topnav`                | `topnav`                  | Footer menu only. When true, renders the links as a top navigation list and shows only the first `limit` items (3 if `limit` is not set).                                                                                                                                                                                                                      | `boolean`                        |            |
| `useReactLink`          | `use-react-link`          | Not read by the component, so it has no effect. Links are handled by the storefront router. **Deprecated:** It will be removed in the next major version. Stop passing it.                                                                                                                                                                                     | `boolean`                        | `false`    |
| `withCookiePreferences` | `with-cookie-preferences` | When true (footer menu only), appends a link to open cookie preferences. Use as `with-cookie-preferences` in markup. The link is added by `salla-cookies-bar`, which reads this prop from the menu, so it appears only when a cookies bar is on the page.                                                                                                      | `boolean`                        |            |

## Related [#related]

Renders: [`<salla-products-list>`](https://docs.salla.dev/twilight/react/web-components/salla-products-list).